135 | {wellFormedMarketId ? (
136 | <>
137 | {!market && !loadingMarket && (
138 |
139 | Not a valid market
140 |
141 | )}
142 | {market && knownMarket && (
143 |
144 | Market known: {knownMarket.name}
145 |
146 | )}
147 | {market && !knownProgram && (
148 |
149 | Warning: unknown DEX program
150 |
151 | )}
152 | {market && knownProgram && knownProgram.deprecated && (
153 |
154 | Warning: deprecated DEX program
155 |
156 | )}
157 |
158 | ) : (
159 | <>
160 | {marketId && !wellFormedMarketId && (
161 |
162 | Invalid market ID
163 |
164 | )}
165 |
166 | )}
167 |
168 |
177 |
178 |
179 |
188 |
189 |
216 |
217 |
198 | Warning: unknown token
199 |
200 | )}
201 |
202 |
211 | Warning: unknown token
212 |
213 | )}
214 |
215 |
43 |
62 | Mint address:
44 |{coinMint.toBase58()}
45 |
46 |
61 | SPL Deposit address:
47 |48 | {account ? ( 49 | account.pubkey.toBase58() 50 | ) : ( 51 | <> 52 | Visit{' '} 53 | 54 | {providerName} 55 | {' '} 56 | to create an account for this mint 57 | 58 | )} 59 |
60 |
41 |
44 |
45 | {!balances ? (
46 |
82 |
88 |
89 |
90 | )}
91 |
19 |
24 | );
25 | }
26 |
27 | return this.props.children;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Layout, Row, Col, Grid } from 'antd';
3 | import Link from './Link';
4 | import { helpUrls } from './HelpUrls';
5 | import { useReferrer } from '../utils/referrer';
6 | const { Footer } = Layout;
7 | const { useBreakpoint } = Grid;
8 |
9 | const footerElements = [
10 | {
11 | description: 'Serum Developer Resources',
12 | link: helpUrls.developerResources,
13 | },
14 | { description: 'Discord', link: helpUrls.discord },
15 | { description: 'Telegram', link: helpUrls.telegram },
16 | { description: 'GitHub', link: helpUrls.github },
17 | { description: 'Project Serum', link: helpUrls.projectSerum },
18 | { description: 'Solana Network', link: helpUrls.solanaBeach },
19 | ];
20 |
21 | export const CustomFooter = () => {
22 | const smallScreen = !useBreakpoint().lg;
23 | const { refCode, allowRefLink } = useReferrer();
24 | return (
25 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { useEffect, useLayoutEffect, useState } from "react";
3 |
4 | import WalletConnect from "./WalletConnect";
5 |
6 | function useWindowSize() {
7 | const [size, setSize] = useState([0, 0]);
8 |
9 | useLayoutEffect(() => {
10 | function updateSize() {
11 | setSize([window.innerWidth, window.innerHeight]);
12 | }
13 | window.addEventListener("resize", updateSize);
14 | updateSize();
15 | return () => window.removeEventListener("resize", updateSize);
16 | }, []);
17 | return size;
18 | }
19 | const MainHeader = () => {
20 | const [width] = useWindowSize();
21 | const [tokenPrice, setTokenPrice] = useState(null);
22 |
23 | // const history = useHistory();
24 | // const location = useLocation();
25 |
26 | const getTokenPrice = async () => {
27 | try {
28 | let result = await axios.get(
29 | "https://coins.llama.fi/prices/current/solana:5Wsd311hY8NXQhkt9cWHwTnqafk7BGEbLu8Py3DSnPAr"
30 | );
31 | if (result.data) {
32 | setTokenPrice(
33 | result.data.coins[
34 | "solana:5Wsd311hY8NXQhkt9cWHwTnqafk7BGEbLu8Py3DSnPAr"
35 | ].price
36 | );
37 | }
38 | } catch (error) { }
39 | };
40 |
41 | useEffect(() => {
42 | getTokenPrice();
43 | }, []);
44 |
45 | return (
46 |
20 | Something went wrong.
21 | Please try again later.
22 |
23 |
47 |
131 | );
132 | };
133 | MainHeader.ssr = false;
134 | export default MainHeader;
135 |
--------------------------------------------------------------------------------
/src/components/HelpUrls.ts:
--------------------------------------------------------------------------------
1 | export const helpUrls = {
2 | customerSupport: 'https://t.me/ProjectSerum',
3 | customerSupportZh: 'https://t.me/ProjectSerum_Chinese',
4 | contactEmail: 'mailto:contact@projectserum.com',
5 | discord: 'https://discord.gg/EDvudv6',
6 | telegram: 'https://t.me/ProjectSerum',
7 | github: 'https://github.com/project-serum',
8 | projectSerum: 'https://projectserum.com/',
9 | developerResources: 'https://projectserum.com/developer-resources',
10 | solanaBeach: 'https://solanabeach.io',
11 | };
12 |
--------------------------------------------------------------------------------
/src/components/LinkAddress.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'antd';
3 | import { LinkOutlined } from '@ant-design/icons';
4 |
5 | export default function LinkAddress({
6 | title,
7 | address,
8 | shorten = false,
9 | }: {
10 | title?: undefined | any;
11 | address: string;
12 | shorten?: boolean;
13 | }) {
14 | return (
15 |
48 |
130 |
49 |
67 |
68 |
69 |
94 |
95 |
102 |
129 |
112 |
117 |
113 | ![]({"/assets/img/sol.png"})
114 | SOL
115 |
116 |
114 | SOL
115 |
118 | ![]({"/assets/img/cmfi_ticker.png"})
119 | ${tokenPrice && tokenPrice.toFixed(4)}
120 |
121 |
125 |
126 |
119 | ${tokenPrice && tokenPrice.toFixed(4)}
120 |
16 | {title &&
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/MainLayout.tsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | import { MantineProvider } from "@mantine/core";
4 | import { Notifications } from "@mantine/notifications";
5 | import { SnackbarProvider } from "notistack";
6 | import { useMemo } from "react";
7 |
8 | import {
9 | ConnectionProvider,
10 | useConnectionConfig
11 | } from "../utils/connection";
12 | import { ReferrerProvider } from "../utils/referrer";
13 |
14 | import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
15 | import { BitpieWalletAdapter } from "@solana/wallet-adapter-bitpie";
16 | import { BloctoWalletAdapter } from "@solana/wallet-adapter-blocto";
17 | import { ExodusWalletAdapter } from "@solana/wallet-adapter-exodus";
18 | import { LedgerWalletAdapter } from "@solana/wallet-adapter-ledger";
19 | import { MathWalletAdapter } from "@solana/wallet-adapter-mathwallet";
20 | import { PhantomWalletAdapter } from "@solana/wallet-adapter-phantom";
21 | import { WalletProvider } from "@solana/wallet-adapter-react";
22 | import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
23 | import { SolflareWalletAdapter } from "@solana/wallet-adapter-solflare";
24 | import {
25 | SolletExtensionWalletAdapter,
26 | SolletWalletAdapter
27 | } from "@solana/wallet-adapter-sollet";
28 |
29 | import SplTokenProvider from "../context/tokenList";
30 | require("@solana/wallet-adapter-react-ui/styles.css");
31 |
32 | function AppImpl({ children }: { children: any }) {
33 | const { endpoint } = useConnectionConfig();
34 | const network = useMemo(() => endpoint as WalletAdapterNetwork, [endpoint]);
35 | const wallets = useMemo(
36 | () => [
37 | new SolletWalletAdapter({ network }),
38 | new SolletExtensionWalletAdapter({ network }),
39 | new LedgerWalletAdapter(),
40 | new SolflareWalletAdapter({ network }),
41 | new PhantomWalletAdapter(),
42 | new MathWalletAdapter(),
43 | new ExodusWalletAdapter(),
44 | new BloctoWalletAdapter(),
45 | new BitpieWalletAdapter()
46 | ],
47 | [network]
48 | );
49 | return (
50 |
51 | {title}
} 17 | } 20 | href={'https://solscan.io/address/' + address} 21 | target="_blank" 22 | rel="noopener noreferrer" 23 | style={{ cursor: 'pointer' }} 24 | > 25 | {shorten ? `${address.slice(0, 4)}...${address.slice(-4)}` : address} 26 | 27 |
62 | {children}
63 |
64 |
65 |
117 | {orderbookData?.asks.map(({ price, size, sizePercent }) => (
118 | onPrice(price)}
125 | onSizeClick={() => onSize(size)}
126 | />
127 | ))}
128 | onPrice(price)}
140 | onSizeClick={() => onSize(size)}
141 | />
142 | ))}
143 |
144 |
12 |
21 | To use auto settle, first enable auto approval in your wallet
22 |
23 | )}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/StandaloneTokenAccountSelect.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TokenAccount } from "../utils/types";
3 | import { useSelectedTokenAccounts } from "../utils/markets";
4 | import { Button, Col, Select, Typography } from "antd";
5 | import { CopyOutlined } from "@ant-design/icons";
6 | import { abbreviateAddress } from "../utils/utils";
7 | import { notify } from "../utils/notifications";
8 |
9 | export default function StandaloneTokenAccountsSelect({
10 | accounts,
11 | mint,
12 | label,
13 | }: {
14 | accounts: TokenAccount[] | null | undefined;
15 | mint: string | undefined;
16 | label?: boolean;
17 | }) {
18 | const [selectedTokenAccounts, setSelectedTokenAccounts] =
19 | useSelectedTokenAccounts();
20 |
21 | let selectedValue: string | undefined;
22 | if (mint && mint in selectedTokenAccounts) {
23 | selectedValue = selectedTokenAccounts[mint];
24 | } else if (accounts && accounts?.length > 0) {
25 | selectedValue = accounts[0].pubkey.toBase58();
26 | } else {
27 | selectedValue = undefined;
28 | }
29 |
30 | const setTokenAccountForCoin = (value) => {
31 | if (!mint) {
32 | notify({
33 | message: "Error selecting token account",
34 | description: "Mint is undefined",
35 | type: "error",
36 | });
37 | return;
38 | }
39 | const newSelectedTokenAccounts = { ...selectedTokenAccounts };
40 | newSelectedTokenAccounts[mint] = value;
41 | setSelectedTokenAccounts(newSelectedTokenAccounts);
42 | };
43 |
44 | return (
45 |
88 |
95 |
96 | ),
97 | },
98 | ].filter((x) => x);
99 | return (
100 |
18 | {feeTier}
19 | {row.index === 0 ? (
20 |
27 | ),
28 | },
29 | {
30 | title: "Taker",
31 | dataIndex: "taker",
32 | key: "taker",
33 | render: (feeTier, row) =>
34 | percentFormat.format(getFeeRates(row.feeTier).taker),
35 | },
36 | {
37 | title: "Maker",
38 | dataIndex: "maker",
39 | key: "maker",
40 | render: (feeTier, row) =>
41 | percentFormat.format(getFeeRates(row.feeTier).maker),
42 | },
43 | {
44 | title: `Public Key`,
45 | dataIndex: "pubkey",
46 | key: "pubkey",
47 | render: (pubkey) => pubkey.toBase58(),
48 | },
49 | {
50 | title: `Balance`,
51 | dataIndex: "balance",
52 | key: "balance",
53 | },
54 | {
55 | title: `Mint`,
56 | dataIndex: "mint",
57 | key: "mint",
58 | render: (_, row) =>
59 | row.mint.equals(TokenInstructions.SRM_MINT)
60 | ? "SRM"
61 | : row.mint.equals(TokenInstructions.MSRM_MINT)
62 | ? "MSRM"
63 | : "UNKNOWN",
64 | },
65 | ];
66 |
67 | const dataSource = (feeAccounts || []).map((account, index) => ({
68 | ...account,
69 | index,
70 | key: account.pubkey.toBase58(),
71 | }));
72 |
73 | return (
74 | <>
75 |
21 |
22 | Selected
23 |
24 |
25 | ) : null}
26 |
119 |
127 | )
128 | }
129 | ];
130 | const dataSource = (openOrders || []).map((order) => ({
131 | ...order,
132 | key: order.orderId
133 | }));
134 |
135 | return (
136 |
120 |
135 |
121 |
134 |
122 |
130 |
126 | Please connect your wallet to utilize Openbook functions ,
127 | view balances, or access your open orders.
128 |
129 |
131 |
133 |
21 | {emptyLabel}
22 |
23 | );
24 |
25 | return (
26 |
20 |
25 | );
26 | }
27 |
28 | export default HomePage;
--------------------------------------------------------------------------------
/src/pages/pools/PoolListPage.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import FloatingElement from '../../components/layout/FloatingElement';
3 | import React, { useState } from 'react';
4 | import { Button, Input, Typography } from 'antd';
5 | //import { useHistory } from 'react-router-dom';
6 | //import Link from '../../components/Link';
7 |
8 | const { Title } = Typography;
9 |
10 | const Wrapper = styled.div`
11 | max-width: 700px;
12 | margin-left: auto;
13 | margin-right: auto;
14 | margin-top: 24px;
15 | margin-bottom: 24px;
16 | `;
17 |
18 | const Form = styled.form`
19 | display: flex;
20 | margin-top: 16px;
21 | margin-bottom: 48px;
22 | `;
23 |
24 | export default function PoolListPage() {
25 | const [poolAddress, setPoolAddress] = useState('');
26 | //const history = useHistory();
27 |
28 | function onSubmit(e:any) {
29 | e.preventDefault();
30 | //history.push(`/pools/${poolAddress}`);
31 | }
32 | return (
33 | Index Page
21 | 24 |-
41 | {[
42 | poolInfo.state.poolTokenMint,
43 | ...poolInfo.state.assets.map((asset) => asset.mint),
44 | ].map((mint, index) => {
45 | const tokenAccount = tokenAccounts?.find((account) =>
46 | account.effectiveMint.equals(mint),
47 | );
48 | if (!tokenAccount) {
49 | return null;
50 | }
51 | return (
52 |
-
67 | {poolInfo.state.assets.map((asset, index) => {
68 | return (
69 |
-
21 | {poolInfo.state.assets.map((asset, index) => (
22 |
55 |
57 |