\n
\n );\n }\n\n return this.props.children!;\n }\n}\n","import { useRef, useEffect } from 'react';\n\nexport function useInterval(callback, delay) {\n const savedCallback = useRef<() => void>();\n\n // Remember the latest callback.\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n // Set up the interval.\n useEffect(() => {\n function tick() {\n savedCallback.current && savedCallback.current();\n }\n if (delay !== null) {\n let id = setInterval(tick, delay);\n return () => {\n clearInterval(id);\n };\n }\n }, [delay]);\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Wrapper = styled.div`\n margin: 5px;\n padding: 20px;\n background-color: #1a2029;\n`;\n\nexport default function FloatingElement({\n style = {},\n children,\n stretchVertical = false,\n}) {\n return (\n \n Something went wrong. \n Please try again later. \n
\n \n onSettleFunds(market, openOrders)}\n >\n Settle {marketName}\n \n
\n ),\n },\n ].filter((x) => x);\n return (\n \n
\n ),\n },\n ];\n const dataSource = (openOrders || []).map((order) => ({\n ...order,\n key: order.orderId,\n }));\n\n return (\n \n
\n \n );\n}\n","import React from 'react';\nimport { TokenAccount } from '../utils/types';\nimport { useSelectedTokenAccounts } from '../utils/markets';\nimport { Button, Col, Select, Typography } from 'antd';\nimport { CopyOutlined } from '@ant-design/icons';\nimport { abbreviateAddress } from '../utils/utils';\nimport { notify } from '../utils/notifications';\n\nexport default function StandaloneTokenAccountsSelect({\n accounts,\n mint,\n label,\n}: {\n accounts: TokenAccount[] | null | undefined;\n mint: string | undefined;\n label?: boolean;\n}) {\n const [\n selectedTokenAccounts,\n setSelectedTokenAccounts,\n ] = useSelectedTokenAccounts();\n\n let selectedValue: string | undefined;\n if (mint && mint in selectedTokenAccounts) {\n selectedValue = selectedTokenAccounts[mint];\n } else if (accounts && accounts?.length > 0) {\n selectedValue = accounts[0].pubkey.toBase58();\n } else {\n selectedValue = undefined;\n }\n\n const setTokenAccountForCoin = (value) => {\n if (!mint) {\n notify({\n message: 'Error selecting token account',\n description: 'Mint is undefined',\n type: 'error',\n });\n return;\n }\n const newSelectedTokenAccounts = { ...selectedTokenAccounts };\n newSelectedTokenAccounts[mint] = value;\n setSelectedTokenAccounts(newSelectedTokenAccounts);\n };\n\n return (\n Mint address:
\n{coinMint.toBase58()}
\n\n
\n SPL Deposit address:
\n\n {account ? (\n account.pubkey.toBase58()\n ) : (\n <>\n Visit{' '}\n \n {providerName}\n {' '}\n to create an account for this mint\n \n )}\n
\n\n {title &&
\n );\n}\n","import React, { useContext, useState } from 'react';\nimport { sleep, useLocalStorageState } from './utils';\nimport { useInterval } from './useInterval';\nimport { useConnection, useConnectionConfig } from './connection';\nimport { useWallet } from '@solana/wallet-adapter-react';\nimport { useMarketInfos, useTokenAccounts } from './markets';\nimport { settleAllFunds } from './send';\nimport { PreferencesContextValues } from './types';\nimport { Market } from '@openbook-dex/openbook';\nimport { BaseSignerWalletAdapter } from '@solana/wallet-adapter-base';\n\nexport const AUTO_SETTLE_DISABLED_OVERRIDE = true;\n\nconst PreferencesContext = React.createContext{title}
}\n\n setSide(e.target.value)}\n value={side}\n buttonStyle=\"solid\"\n style={{\n marginBottom: 8,\n width: '100%',\n }}\n >\n \n BUY\n \n \n SELL\n \n \n Price
}\n suffix={\n {quoteCurrency}\n }\n value={price}\n type=\"number\"\n step={market?.tickSize || 1}\n onChange={(e) => setPrice(parseFloat(e.target.value))}\n />\n \n {'POST '}\n
\n \n {side === 'buy' ? (\n \n \n
\n {!balances ? (\n \n \n Switch to new markets\n \n
\n \n )}\n \n {wellFormedMarketId ? (\n <>\n {!market && !loadingMarket && (\n \n Not a valid market \n
\n )}\n {market && knownMarket && (\n \n Market known: {knownMarket.name} \n
\n )}\n {market && !knownProgram && (\n \n Warning: unknown DEX program \n
\n )}\n {market && knownProgram && knownProgram.deprecated && (\n \n Warning: deprecated DEX program \n
\n )}\n \n ) : (\n <>\n {marketId && !wellFormedMarketId && (\n \n Invalid market ID \n
\n )}\n \n )}\n \n setMarketId(e.target.value)}\n suffix={loadingMarket ?
\n\n \n setMarketLabel(e.target.value)}\n />\n \n
\n \n setBaseLabel(e.target.value)}\n />\n {market && !knownBaseCurrency && (\n setQuoteLabel(e.target.value)}\n />\n {market && !knownQuoteCurrency && (\n
\n
\n \n );\n}\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button, Col, Popover, Row, Select, Typography } from 'antd';\nimport styled from 'styled-components';\nimport Orderbook from '../components/Orderbook';\nimport UserInfoTable from '../components/UserInfoTable';\nimport StandaloneBalancesDisplay from '../components/StandaloneBalancesDisplay';\nimport {\n getMarketInfos,\n getTradePageUrl,\n MarketProvider,\n useMarket,\n useMarketsList,\n useUnmigratedDeprecatedMarkets,\n} from '../utils/markets';\nimport TradeForm from '../components/TradeForm';\nimport TradesTable from '../components/TradesTable';\nimport LinkAddress from '../components/LinkAddress';\nimport DeprecatedMarketsInstructions from '../components/DeprecatedMarketsInstructions';\nimport {\n DeleteOutlined,\n InfoCircleOutlined,\n PlusCircleOutlined,\n} from '@ant-design/icons';\nimport CustomMarketDialog from '../components/CustomMarketDialog';\nimport { notify } from '../utils/notifications';\nimport { useHistory, useParams } from 'react-router-dom';\nimport { nanoid } from 'nanoid';\n\n// import { TVChartContainer } from '../components/TradingView';\n// Use following stub for quick setup without the TradingView private dependency\nfunction TVChartContainer() {\n return <>;\n}\n\nconst { Option, OptGroup } = Select;\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 16px 16px;\n .borderNone .ant-select-selector {\n border: none !important;\n }\n`;\n\nexport default function TradePage() {\n const { marketAddress } = useParams();\n useEffect(() => {\n if (marketAddress) {\n localStorage.setItem('marketAddress', JSON.stringify(marketAddress));\n }\n }, [marketAddress]);\n const history = useHistory();\n function setMarketAddress(address) {\n history.push(getTradePageUrl(address));\n }\n\n return (\n \n Warning: unknown token \n
\n )}\n \n \n Warning: unknown token \n
\n )}\n \n \n \n To use auto settle, first enable auto approval in your wallet\n \n )}\n
\n );\n}\n","import React, { useState } from 'react';\nimport { Col, Input, Modal, Row } from 'antd';\nimport { EndpointInfo } from '../utils/types';\n\nexport default function CustomClusterEndpointDialog({\n visible,\n testingConnection,\n onAddCustomEndpoint,\n onClose,\n}: {\n visible: boolean;\n testingConnection: boolean;\n onAddCustomEndpoint: (info: EndpointInfo) => void;\n onClose?: () => void;\n}) {\n const [customEndpoint, setCustomEndpoint] = useState('');\n const [customEndpointName, setCustomEndpointName] = useState('');\n\n const onSubmit = () => {\n const fullEndpoint = 'https://' + customEndpoint;\n const params = {\n name: customEndpointName,\n endpoint: fullEndpoint,\n custom: true,\n };\n onAddCustomEndpoint(params);\n onDoClose();\n };\n const onDoClose = () => {\n setCustomEndpoint('');\n setCustomEndpointName('');\n onClose && onClose();\n };\n const canSubmit = customEndpoint !== '' && customEndpointName !== '';\n\n return (\n 
\n \n \n setAddEndpointVisible(true)}\n />\n \n \n \n {availableEndpoints.map(({ name, endpoint }) => (\n \n {name}\n \n ))}\n \n \n \n
*/}\n {connected && (\n \n
\n )}\n \n
\n \n {!!faucet ?