blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

use custom endpoint url

This commit is contained in:
Tyler Shipe 2021-09-13 17:14:59 -04:00
parent cc87df1c02
commit c1269298b9
15 changed files with 134 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/AccountInfo.tsx
View File

@ -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)

3
components/AccountNameModal.tsx
View File

@ -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 () => {

3
components/BalancesTable.tsx
View File

@ -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

17
components/ConnectWalletButton.tsx
View File

@ -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}
</>
)
}

8
components/Input.tsx
View File

@ -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
border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right"
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 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

9
components/MarketCloseModal.tsx
View File

@ -1,8 +1,5 @@
import { FunctionComponent, useEffect, useRef, useState } from 'react'
import useMangoStore, {
DEFAULT_CONNECTION,
mangoClient,
} from '../stores/useMangoStore'
import useMangoStore 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))

3
components/MarketPosition.tsx
View File

@ -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(

3
components/OpenOrdersTable.tsx
View File

@ -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 {

48
components/SettingsModal.tsx Normal file
View File

@ -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)

4
components/TradeForm.tsx
View File

@ -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}
/>

4
components/account-page/AccountAssets.tsx
View File

@ -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 { settleAllTrades } from '../../utils/mango'
import useMangoStore from '../../stores/useMangoStore'
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
)

11
hooks/useHydrateStore.tsx
View File

@ -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)
WEBSOCKET_CONNECTION.removeAccountChangeListener(askSubscriptionId)
connection.removeAccountChangeListener(bidSubscriptionId)
connection.removeAccountChangeListener(askSubscriptionId)
}
}, [selectedMarket])

5
hooks/useSrmAccount.tsx
View File

@ -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)
}

51
stores/useMangoStore.tsx
View File

@ -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),
mangoGroup.loadCache(DEFAULT_CONNECTION),
mangoGroup.loadRootBanks(DEFAULT_CONNECTION),
getMultipleAccounts(connection, allMarketPks),
mangoGroup.loadCache(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.loadOpenOrders(
DEFAULT_CONNECTION,
new PublicKey(serumProgramId)
),
mangoAccount.reload(connection),
mangoAccount.loadOpenOrders(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(
DEFAULT_CONNECTION,
10000
)
const loadedFills = await selectedMarket.loadFills(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
})
},
},
}))

4
utils/mango.tsx
View File

@ -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,