update connection/client

components/settings/RpcSettings.tsx

@@ -1,26 +1,28 @@
 import ButtonGroup from '@components/forms/ButtonGroup'
 import Input from '@components/forms/Input'
 import Button from '@components/shared/Button'
+import mangoStore from '@store/mangoStore'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { RPC_PROVIDER_KEY } from 'utils/constants'
 
 const RPC_URLS = [
+  {
+    label: 'Triton',
+    value: 'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
+  },
   {
     label: 'Syndica',
     value:
       'https://solana-api.syndica.io/access-token/4ywEBJNxuwPLXXU9UlMK67fAMZBt1GLdwuXyXSYnoYPn5aXajT8my0R5klXhYRkk/rpc',
   },
-  {
-    label: 'Triton',
-    value: 'https://mango-mango-d092.mainnet.rpcpool.com/',
-  },
   { label: 'Custom', value: '' },
 ]
 
 const RpcSettings = () => {
   const { t } = useTranslation('settings')
+  const actions = mangoStore((s) => s.actions)
   const [customUrl, setCustomUrl] = useState('')
   const [showCustomForm, setShowCustomForm] = useState(false)
   const [rpcEndpointProvider, setRpcEndpointProvider] = useLocalStorageState(
@@ -36,7 +38,7 @@ const RpcSettings = () => {
     setRpcEndpointProvider(endpointProvider)
     if (provider !== 'Custom') {
       setShowCustomForm(false)
-      // update connection to endpointProvider.value
+      actions.updateConnection(endpointProvider!.value)
     }
   }
 
@@ -51,7 +53,7 @@ const RpcSettings = () => {
     if (!customUrl) return
     const provider = { label: 'Custom', value: customUrl }
     setRpcEndpointProvider(provider)
-    // update connection to customUrl
+    actions.updateConnection(customUrl)
   }
 
   return (

public/locales/en/settings.json

@@ -28,6 +28,7 @@
     "rpc-provider": "RPC Provider",
     "rpc-url": "Enter RPC URL",
     "russian": "Русский",
+    "save": "Save",
     "slider": "Slider",
     "solana-beach": "Solana Beach",
     "solana-explorer": "Solana Explorer",

public/locales/es/settings.json

@@ -28,6 +28,7 @@
     "rpc-provider": "RPC Provider",
     "rpc-url": "Enter RPC URL",
     "russian": "Русский",
+    "save": "Save",
     "slider": "Slider",
     "solana-beach": "Solana Beach",
     "solana-explorer": "Solana Explorer",

public/locales/ru/settings.json

@@ -28,6 +28,7 @@
     "rpc-provider": "RPC Provider",
     "rpc-url": "Enter RPC URL",
     "russian": "Русский",
+    "save": "Save",
     "slider": "Slider",
     "solana-beach": "Solana Beach",
     "solana-explorer": "Solana Explorer",

public/locales/zh/settings.json

@@ -28,6 +28,7 @@
     "rpc-provider": "RPC Provider",
     "rpc-url": "Enter RPC URL",
     "russian": "Русский",
+    "save": "Save",
     "slider": "Slider",
     "solana-beach": "Solana Beach",
     "solana-explorer": "Solana Explorer",

public/locales/zh_tw/settings.json

@@ -28,6 +28,7 @@
     "rpc-provider": "RPC Provider",
     "rpc-url": "Enter RPC URL",
     "russian": "Русский",
+    "save": "Save",
     "slider": "Slider",
     "solana-beach": "Solana Beach",
     "solana-explorer": "Solana Explorer",

store/mangoStore.ts

@@ -32,6 +32,7 @@ import {
   INPUT_TOKEN_DEFAULT,
   LAST_ACCOUNT_KEY,
   OUTPUT_TOKEN_DEFAULT,
+  RPC_PROVIDER_KEY,
 } from '../utils/constants'
 import { OrderbookL2, SpotBalances } from 'types'
 import spotBalancesUpdater from './spotBalancesUpdater'
@@ -40,24 +41,67 @@ import perpPositionsUpdater from './perpPositionsUpdater'
 
 const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
 
-export const connection = new web3.Connection(
-  process.env.NEXT_PUBLIC_ENDPOINT ||
-    'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
-  'processed'
-)
+const ENDPOINTS = [
+  {
+    name: 'mainnet-beta',
+    url:
+      process.env.NEXT_PUBLIC_ENDPOINT ||
+      'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
+    websocket:
+      process.env.NEXT_PUBLIC_ENDPOINT ||
+      'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
+    custom: false,
+  },
+  {
+    name: 'devnet',
+    // url: 'https://mango.devnet.rpcpool.com',
+    // websocket: 'https://mango.devnet.rpcpool.com',
+    url: 'https://api.devnet.solana.com',
+    websocket: 'https://api.devnet.solana.com',
+    custom: false,
+  },
+  // {
+  //   name: 'testnet',
+  //   url: 'https://api.testnet.solana.com',
+  //   websocket: 'https://api.testnet.solana.com',
+  //   custom: false,
+  // },
+]
+
+// export const connection = new web3.Connection(
+//   process.env.NEXT_PUBLIC_ENDPOINT ||
+//     'https://mango.rpcpool.com/0f9acc0d45173b51bf7d7e09c1e5',
+//   'processed'
+// )
 const options = AnchorProvider.defaultOptions()
 export const CLUSTER: 'mainnet-beta' | 'devnet' = 'mainnet-beta'
+const ENDPOINT = ENDPOINTS.find((e) => e.name === CLUSTER)
 const wallet = new EmptyWallet(Keypair.generate())
-const DEFAULT_PROVIDER = new AnchorProvider(connection, wallet, options)
-DEFAULT_PROVIDER.opts.skipPreflight = true
-const DEFAULT_CLIENT = MangoClient.connect(
-  DEFAULT_PROVIDER,
-  CLUSTER,
-  MANGO_V4_ID[CLUSTER],
-  {
+// const DEFAULT_PROVIDER = new AnchorProvider(connection, wallet, options)
+// DEFAULT_PROVIDER.opts.skipPreflight = true
+// const DEFAULT_CLIENT = MangoClient.connect(
+//   DEFAULT_PROVIDER,
+//   CLUSTER,
+//   MANGO_V4_ID[CLUSTER],
+//   {
+//     idsSource: 'get-program-accounts',
+//   }
+// )
+
+const initMangoClient = (provider: AnchorProvider): MangoClient => {
+  return MangoClient.connect(provider, CLUSTER, MANGO_V4_ID[CLUSTER], {
+    postSendTxCallback: ({ txid }: { txid: string }) => {
+      notify({
+        title: 'Transaction sent',
+        description: 'Waiting for confirmation',
+        type: 'confirm',
+        txid: txid,
+      })
+    },
+    // blockhashCommitment: 'confirmed',
     idsSource: 'get-program-accounts',
-  }
-)
+  })
+}
 
 export interface TotalInterestDataItem {
   borrow_interest: number
@@ -295,11 +339,24 @@ export type MangoStore = {
     connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
     reloadGroup: () => Promise<void>
     loadMarketFills: () => Promise<void>
+    updateConnection: (url: string) => void
   }
 }
 
 const mangoStore = create<MangoStore>()(
   subscribeWithSelector((_set, get) => {
+    let rpcUrl = ENDPOINT?.url
+    if (typeof window !== 'undefined' && CLUSTER === 'mainnet-beta') {
+      const urlFromLocalStorage = localStorage.getItem(RPC_PROVIDER_KEY)
+      rpcUrl = urlFromLocalStorage
+        ? JSON.parse(urlFromLocalStorage).value
+        : ENDPOINT?.url
+    }
+
+    const connection = new web3.Connection(rpcUrl!, 'processed')
+    const provider = new AnchorProvider(connection, wallet, options)
+    provider.opts.skipPreflight = true
+    const client = initMangoClient(provider)
     return {
       activityFeed: {
         feed: [],
@@ -310,7 +367,7 @@ const mangoStore = create<MangoStore>()(
       connection,
       group: undefined,
       groupLoaded: false,
-      client: DEFAULT_CLIENT,
+      client,
       mangoAccount: {
         current: undefined,
         initialLoad: true,
@@ -940,6 +997,19 @@ const mangoStore = create<MangoStore>()(
             console.log('Error fetching fills:', err)
           }
         },
+        updateConnection(endpointUrl) {
+          const set = get().set
+          const newConnection = new web3.Connection(endpointUrl, 'processed')
+
+          const newProvider = new AnchorProvider(connection, wallet, options)
+          newProvider.opts.skipPreflight = true
+          const newClient = initMangoClient(newProvider)
+
+          set((state) => {
+            state.connection = newConnection
+            state.client = newClient
+          })
+        },
       },
     }
   })