use custom endpoint url

components/AccountInfo.tsx

@@ -8,7 +8,7 @@ import {
 } from '@blockworks-foundation/mango-client'
 import { useCallback, useState } from 'react'
 import { HeartIcon } from '@heroicons/react/solid'
-import useMangoStore, { mangoClient, MNGO_INDEX } from '../stores/useMangoStore'
+import useMangoStore, { MNGO_INDEX } from '../stores/useMangoStore'
 import { formatUsdValue, usdFormatter } from '../utils'
 import { notify } from '../utils/notifications'
 import { LinkButton } from './Button'
@@ -29,6 +29,7 @@ export default function AccountInfo() {
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const actions = useMangoStore((s) => s.actions)
 
   const [showDepositModal, setShowDepositModal] = useState(false)

components/AccountNameModal.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from 'react'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import {
   ExclamationCircleIcon,
   InformationCircleIcon,
@@ -26,6 +26,7 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
   const [invalidNameMessage, setInvalidNameMessage] = useState('')
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const actions = useMangoStore((s) => s.actions)
 
   const submitName = async () => {

components/BalancesTable.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { useBalances } from '../hooks/useBalances'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import Button, { LinkButton } from '../components/Button'
 import { notify } from '../utils/notifications'
 import { ArrowSmDownIcon, ExclamationIcon } from '@heroicons/react/outline'
@@ -38,6 +38,7 @@ const BalancesTable = ({ showZeroBalances = false }) => {
   const actions = useMangoStore((s) => s.actions)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const { width } = useViewport()
   const [submitting, setSubmitting] = useState(false)
   const isMobile = width ? width < breakpoints.md : false

components/ConnectWalletButton.tsx

@@ -17,12 +17,14 @@ import WalletSelect from './WalletSelect'
 import { WalletIcon, ProfileIcon } from './icons'
 import AccountsModal from './AccountsModal'
 import { useEffect } from 'react'
+import SettingsModal from './SettingsModal'
 
 const ConnectWalletButton = () => {
   const wallet = useMangoStore((s) => s.wallet.current)
   const connected = useMangoStore((s) => s.wallet.connected)
   const set = useMangoStore((s) => s.set)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
+  const [showSettingsModal, setShowSettingsModal] = useState(false)
   const [selectedWallet, setSelectedWallet] = useState(DEFAULT_PROVIDER.url)
   const [savedProviderUrl] = useLocalStorageState(
     PROVIDER_LOCAL_STORAGE_KEY,
@@ -63,6 +65,15 @@ const ConnectWalletButton = () => {
                   <div className="pl-2 text-left">Accounts</div>
                 </button>
               </Menu.Item>
+              <Menu.Item>
+                <button
+                  className="hidden md:flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
+                  onClick={() => setShowSettingsModal(true)}
+                >
+                  <CurrencyDollarIcon className="h-4 w-4" />
+                  <div className="pl-2 text-left">Settings</div>
+                </button>
+              </Menu.Item>
               <Menu.Item>
                 <button
                   className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
@@ -117,6 +128,12 @@ const ConnectWalletButton = () => {
           isOpen={showAccountsModal}
         />
       ) : null}
+      {showSettingsModal ? (
+        <SettingsModal
+          onClose={() => setShowSettingsModal(false)}
+          isOpen={showSettingsModal}
+        />
+      ) : null}
     </>
   )
 }

components/Input.tsx

@@ -4,6 +4,7 @@ interface InputProps {
   onChange: (e) => void
   className?: string
   disabled?: boolean
+  prefixClassname?: string
   error?: boolean
   [x: string]: any
 }
@@ -21,6 +22,7 @@ const Input = ({
   wrapperClassName = 'w-full',
   disabled,
   prefix,
+  prefixClassName,
   suffix,
   ...props
 }: InputProps) => {
@@ -28,8 +30,8 @@ const Input = ({
     <div className={`flex relative ${wrapperClassName}`}>
       {prefix ? (
         <div
-          className="flex items-center justify-end p-2 border border-r-0 
+          className={`flex items-center justify-end p-2 border border-r-0 
-          border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right"
+          border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none text-right ${prefixClassName}`}
         >
           {prefix}
         </div>
@@ -38,7 +40,7 @@ const Input = ({
         type={type}
         value={value}
         onChange={onChange}
-        className={`${className} pb-px px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1 
+        className={`${className} pb-px px-2 flex-1 bg-th-bkg-1 rounded h-10 text-th-fgd-1 
           border ${
             error ? 'border-th-red' : 'border-th-fgd-4'
           } default-transition hover:border-th-primary 

components/MarketCloseModal.tsx

@@ -1,8 +1,5 @@
 import { FunctionComponent, useEffect, useRef, useState } from 'react'
-import useMangoStore, {
+import useMangoStore from '../stores/useMangoStore'
-  DEFAULT_CONNECTION,
-  mangoClient,
-} from '../stores/useMangoStore'
 import { PerpMarket, ZERO_BN } from '@blockworks-foundation/mango-client'
 import Button, { LinkButton } from './Button'
 import { notify } from '../utils/notifications'
@@ -25,6 +22,7 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
 }) => {
   const [submitting, setSubmitting] = useState(false)
   const actions = useMangoStore((s) => s.actions)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const orderBookRef = useRef(useMangoStore.getState().selectedMarket.orderBook)
   const config = useMangoStore.getState().selectedMarket.config
 
@@ -44,12 +42,13 @@ const MarketCloseModal: FunctionComponent<MarketCloseModalProps> = ({
     const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
     const { askInfo, bidInfo } = useMangoStore.getState().selectedMarket
     const wallet = useMangoStore.getState().wallet.current
+    const connection = useMangoStore.getState().connection.current
 
     if (!wallet || !mangoGroup || !mangoAccount) return
     setSubmitting(true)
 
     try {
-      const reloadedMangoAccount = await mangoAccount.reload(DEFAULT_CONNECTION)
+      const reloadedMangoAccount = await mangoAccount.reload(connection)
       const perpAccount = reloadedMangoAccount.perpAccounts[marketIndex]
       const side = perpAccount.basePosition.gt(ZERO_BN) ? 'sell' : 'buy'
       const size = Math.abs(market.baseLotsToNumber(perpAccount.basePosition))

components/MarketPosition.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import FloatingElement from './FloatingElement'
 import { ElementTitle } from './styles'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import { i80f48ToPercent, formatUsdValue, floorToDecimal } from '../utils/index'
 import Button, { LinkButton } from './Button'
 import Tooltip from './Tooltip'
@@ -29,6 +29,7 @@ const settlePnl = async (perpMarket: PerpMarket, perpAccount: PerpAccount) => {
   const wallet = useMangoStore.getState().wallet.current
   const actions = useMangoStore.getState().actions
   const marketIndex = mangoGroup.getPerpMarketIndex(perpMarket.publicKey)
+  const mangoClient = useMangoStore.getState().connection.client
 
   try {
     const txid = await mangoClient.settlePnl(

components/OpenOrdersTable.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useOpenOrders } from '../hooks/useOpenOrders'
 import Button from './Button'
 import Loading from './Loading'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import { notify } from '../utils/notifications'
 import SideBadge from './SideBadge'
 import { Order, Market } from '@project-serum/serum/lib/market'
@@ -33,6 +33,7 @@ const OpenOrdersTable = () => {
       useMangoStore.getState().selectedMangoGroup.current
     const selectedMangoAccount =
       useMangoStore.getState().selectedMangoAccount.current
+    const mangoClient = useMangoStore.getState().connection.client
     setCancelId(order.orderId)
     let txid
     try {

components/SettingsModal.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import Modal from './Modal'
+import { ElementTitle } from './styles'
+import Button from './Button'
+import Input from './Input'
+import useMangoStore from '../stores/useMangoStore'
+
+const SettingsModal = ({ isOpen, onClose }) => {
+  const actions = useMangoStore((s) => s.actions)
+  const [rpcEndpointUrl, setRpcEndpointUrl] = useState(
+    'https://mango.rpcpool.com'
+  )
+
+  const handleSetEndpointUrl = (endpointUrl) => {
+    setRpcEndpointUrl(endpointUrl)
+
+    actions.updateConnection(endpointUrl)
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.Header>
+        <ElementTitle noMarignBottom>Advanced Settings</ElementTitle>
+      </Modal.Header>
+      <div className="flex flex-col items-center text-th-fgd-1">
+        <Input.Group className="w-full">
+          <Input
+            type="text"
+            value={rpcEndpointUrl}
+            onChange={(e) => setRpcEndpointUrl(e.target.value)}
+            prefix="RPC Node URL"
+          />
+        </Input.Group>
+        <div className={`flex justify-center w-full mt-4`}>
+          <Button
+            onClick={() => handleSetEndpointUrl(rpcEndpointUrl)}
+            className="w-full"
+          >
+            <div className={`flex items-center justify-center`}>Save</div>
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(SettingsModal)

components/TradeForm.tsx

@@ -9,7 +9,7 @@ import { notify } from '../utils/notifications'
 import { calculateTradePrice, getDecimalCount, sleep } from '../utils'
 import FloatingElement from './FloatingElement'
 import { floorToDecimal } from '../utils/index'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import Button from './Button'
 import TradeType from './TradeType'
 import Input from './Input'
@@ -32,6 +32,7 @@ export default function TradeForm() {
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const market = useMangoStore((s) => s.selectedMarket.current)
   const { side, baseSize, quoteSize, price, tradeType } = useMangoStore(
     (s) => s.tradeForm
@@ -373,6 +374,7 @@ export default function TradeForm() {
               value={baseSize}
               className="rounded-r-none"
               wrapperClassName="w-3/5"
+              prefixClassName="w-12"
               prefix={'Size'}
               suffix={marketConfig.baseSymbol}
             />

components/account-page/AccountAssets.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useState } from 'react'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { InformationCircleIcon } from '@heroicons/react/outline'
-import useMangoStore, { mangoClient } from '../../stores/useMangoStore'
+import useMangoStore from '../../stores/useMangoStore'
-// import { settleAllTrades } from '../../utils/mango'
 import { useBalances } from '../../hooks/useBalances'
 import { tokenPrecision } from '../../utils/index'
 import DepositModal from '../DepositModal'
@@ -24,6 +23,7 @@ export default function AccountAssets() {
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const mangoClient = useMangoStore((s) => s.connection.client)
   const loadingMangoAccount = useMangoStore(
     (s) => s.selectedMangoAccount.initialLoad
   )

hooks/useHydrateStore.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { AccountInfo } from '@solana/web3.js'
-import useMangoStore, { WEBSOCKET_CONNECTION } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import useInterval from './useInterval'
 import useOrderbook from './useOrderbook'
 
@@ -13,6 +13,7 @@ const useHydrateStore = () => {
   const markets = useMangoStore((s) => s.selectedMangoGroup.markets)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
+  const connection = useMangoStore((s) => s.connection.current)
   useOrderbook()
 
   useEffect(() => {
@@ -39,7 +40,7 @@ const useHydrateStore = () => {
     let previousAskInfo: AccountInfo<Buffer> | null = null
     if (!marketConfig) return
 
-    const bidSubscriptionId = WEBSOCKET_CONNECTION.onAccountChange(
+    const bidSubscriptionId = connection.onAccountChange(
       marketConfig.bidsKey,
       (info, context) => {
         const lastSlot = useMangoStore.getState().connection.slot
@@ -57,7 +58,7 @@ const useHydrateStore = () => {
         }
       }
     )
-    const askSubscriptionId = WEBSOCKET_CONNECTION.onAccountChange(
+    const askSubscriptionId = connection.onAccountChange(
       marketConfig.asksKey,
       (info, context) => {
         const lastSlot = useMangoStore.getState().connection.slot
@@ -77,8 +78,8 @@ const useHydrateStore = () => {
     )
 
     return () => {
-      WEBSOCKET_CONNECTION.removeAccountChangeListener(bidSubscriptionId)
+      connection.removeAccountChangeListener(bidSubscriptionId)
-      WEBSOCKET_CONNECTION.removeAccountChangeListener(askSubscriptionId)
+      connection.removeAccountChangeListener(askSubscriptionId)
     }
   }, [selectedMarket])
 

hooks/useSrmAccount.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import useMangoStore, { DEFAULT_CONNECTION } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 import { nativeToUi } from '@blockworks-foundation/mango-client'
 import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
 import { getFeeTier, getFeeRates } from '@project-serum/serum'
@@ -8,6 +8,7 @@ import { useEffect } from 'react'
 
 const useSrmAccount = () => {
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const connection = useMangoStore((s) => s.connection.current)
   const [srmAccount, setSrmAccount] = useState(null)
   // const [msrmAccount, setMsrmAccount] = useState(null)
 
@@ -15,7 +16,7 @@ const useSrmAccount = () => {
     if (mangoGroup) {
       const srmPk = mangoGroup.srmVault
       const fetchAccounts = async () => {
-        const srmAccountInfo = await DEFAULT_CONNECTION.getAccountInfo(srmPk)
+        const srmAccountInfo = await connection.getAccountInfo(srmPk)
 
         setSrmAccount(srmAccountInfo)
       }

stores/useMangoStore.tsx

@@ -73,8 +73,6 @@ export const programId = new PublicKey(defaultMangoGroupIds.mangoProgramId)
 export const serumProgramId = new PublicKey(defaultMangoGroupIds.serumProgramId)
 const mangoGroupPk = new PublicKey(defaultMangoGroupIds.publicKey)
 
-export const mangoClient = new MangoClient(DEFAULT_CONNECTION, programId)
-
 export const INITIAL_STATE = {
   WALLET: {
     providerUrl: null,
@@ -115,6 +113,7 @@ interface MangoStore extends State {
     current: Connection
     websocket: Connection
     endpoint: string
+    client: MangoClient
     slot: number
   }
   selectedMarket: {
@@ -172,6 +171,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     cluster: CLUSTER,
     current: DEFAULT_CONNECTION,
     websocket: WEBSOCKET_CONNECTION,
+    client: new MangoClient(DEFAULT_CONNECTION, programId),
     endpoint: ENDPOINT.url,
     slot: 0,
   },
@@ -221,11 +221,12 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       const groupConfig = get().selectedMangoGroup.config
       const wallet = get().wallet.current
       const connected = get().wallet.connected
+      const connection = get().connection.current
       const set = get().set
 
       if (wallet?.publicKey && connected) {
         const ownedTokenAccounts = await getTokenAccountsByOwnerWithWrappedSol(
-          DEFAULT_CONNECTION,
+          connection,
           wallet.publicKey
         )
         const tokens = []
@@ -249,6 +250,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     async fetchMangoAccounts() {
       const set = get().set
       const mangoGroup = get().selectedMangoGroup.current
+      const mangoClient = get().connection.client
       const wallet = get().wallet.current
       const walletPk = wallet?.publicKey
 
@@ -299,6 +301,8 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       const set = get().set
       const mangoGroupConfig = get().selectedMangoGroup.config
       const selectedMarketConfig = get().selectedMarket.config
+      const mangoClient = get().connection.client
+      const connection = get().connection.current
 
       return mangoClient
         .getMangoGroup(mangoGroupPk)
@@ -309,9 +313,9 @@ const useMangoStore = create<MangoStore>((set, get) => ({
           let allMarketAccountInfos, mangoCache
           try {
             const resp = await Promise.all([
-              getMultipleAccounts(DEFAULT_CONNECTION, allMarketPks),
+              getMultipleAccounts(connection, allMarketPks),
-              mangoGroup.loadCache(DEFAULT_CONNECTION),
+              mangoGroup.loadCache(connection),
-              mangoGroup.loadRootBanks(DEFAULT_CONNECTION),
+              mangoGroup.loadRootBanks(connection),
             ])
             allMarketAccountInfos = resp[0]
             mangoCache = resp[1]
@@ -352,7 +356,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
             .map((m) => [m.bidsKey, m.asksKey])
             .flat()
           const allBidsAndAsksAccountInfos = await getMultipleAccounts(
-            DEFAULT_CONNECTION,
+            connection,
             allBidsAndAsksPks
           )
 
@@ -421,12 +425,10 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     async reloadMangoAccount() {
       const set = get().set
       const mangoAccount = get().selectedMangoAccount.current
+      const connection = get().connection.current
       const [reloadedMangoAccount, reloadedOpenOrders] = await Promise.all([
-        mangoAccount.reload(DEFAULT_CONNECTION),
+        mangoAccount.reload(connection),
-        mangoAccount.loadOpenOrders(
+        mangoAccount.loadOpenOrders(connection, new PublicKey(serumProgramId)),
-          DEFAULT_CONNECTION,
-          new PublicKey(serumProgramId)
-        ),
       ])
       reloadedMangoAccount.spotOpenOrdersAccounts = reloadedOpenOrders
 
@@ -436,12 +438,13 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     },
     async updateOpenOrders() {
       const set = get().set
+      const connection = get().connection.current
       const bidAskAccounts = Object.keys(get().accountInfos).map(
         (pk) => new PublicKey(pk)
       )
 
       const allBidsAndAsksAccountInfos = await getMultipleAccounts(
-        DEFAULT_CONNECTION,
+        connection,
         bidAskAccounts
       )
 
@@ -457,14 +460,12 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     async loadMarketFills() {
       const set = get().set
       const selectedMarket = get().selectedMarket.current
+      const connection = get().connection.current
       if (!selectedMarket) {
         return null
       }
       try {
-        const loadedFills = await selectedMarket.loadFills(
+        const loadedFills = await selectedMarket.loadFills(connection, 10000)
-          DEFAULT_CONNECTION,
-          10000
-        )
         set((state) => {
           state.selectedMarket.fills = loadedFills
         })
@@ -475,14 +476,28 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     async fetchMangoGroupCache() {
       const set = get().set
       const mangoGroup = get().selectedMangoGroup.current
+      const connection = get().connection.current
       if (mangoGroup) {
-        const mangoCache = await mangoGroup.loadCache(DEFAULT_CONNECTION)
+        const mangoCache = await mangoGroup.loadCache(connection)
 
         set((state) => {
           state.selectedMangoGroup.cache = mangoCache
         })
       }
     },
+    async updateConnection(endpointUrl) {
+      const set = get().set
+
+      const newConnection = new Connection(endpointUrl, 'processed')
+
+      const newClient = new MangoClient(newConnection, programId)
+
+      set((state) => {
+        state.connection.endpoint = endpointUrl
+        state.connection.current = newConnection
+        state.connection.client = newClient
+      })
+    },
   },
 }))
 

utils/mango.tsx

@@ -1,6 +1,6 @@
 import { MangoAccount, TokenAccount } from '@blockworks-foundation/mango-client'
 import { PublicKey } from '@solana/web3.js'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import useMangoStore from '../stores/useMangoStore'
 
 export async function deposit({
   amount,
@@ -16,6 +16,7 @@ export async function deposit({
   const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
   const wallet = useMangoStore.getState().wallet.current
   const tokenIndex = mangoGroup.getTokenIndex(fromTokenAcc.mint)
+  const mangoClient = useMangoStore.getState().connection.client
 
   if (mangoAccount) {
     return await mangoClient.deposit(
@@ -55,6 +56,7 @@ export async function withdraw({
   const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
   const wallet = useMangoStore.getState().wallet.current
   const tokenIndex = mangoGroup.getTokenIndex(token)
+  const mangoClient = useMangoStore.getState().connection.client
 
   return await mangoClient.withdraw(
     mangoGroup,