136 |
147 | {props.title}
137 |
138 |
141 | props.onInputChange && props.onInputChange(userUiBalance())
142 | }
143 | >
144 | Balance: {userUiBalance().toFixed(6)}
145 |
146 |
148 | {
151 | if (props.onInputChange) {
152 | props.onInputChange(val);
153 | }
154 | }}
155 | style={{
156 | fontSize: 20,
157 | boxShadow: "none",
158 | borderColor: "transparent",
159 | outline: "transpaernt",
160 | }}
161 | placeholder="0.00"
162 | />
163 |
164 |
182 |
165 |
180 |
181 | Trade
,
18 | render: () => {
19 | return Pool
,
25 | render: () => {
26 | return
35 |
94 | );
95 |
96 | return (
97 | <>
98 | {TopBar}
99 |
36 |
37 |
38 |
39 |
48 |
93 |
59 | {!connected && (
60 |
68 | )}
69 | {connected && (
70 |
77 | {
78 |
115 |
119 | Liquidity providers earn a fixed percentage fee on all trades
120 | proportional to their share of the pool. Fees are added to the pool,
121 | accrue in real time and can be claimed by withdrawing your
122 | liquidity.
123 |
124 | }
125 | >
126 |
127 |
128 |
129 | +
144 |
22 | {
34 | setValue(x);
35 |
36 | const val = parseFloat(x);
37 | if (Number.isFinite(val)) {
38 | const numerator = (val * DEFAULT_DENOMINATOR) / 100;
39 | props.set(numerator, DEFAULT_DENOMINATOR);
40 | }
41 | }}
42 | />
43 | %
44 |
45 | );
46 | };
47 |
48 | // sets fee in the pool to 0.3%
49 | // see for fees details: https://uniswap.org/docs/v2/advanced-topics/fees/
50 | export const PoolConfigCard = (props: {
51 | options: PoolConfig;
52 | setOptions: (config: PoolConfig) => void;
53 | }) => {
54 | const {
55 | tradeFeeNumerator,
56 | tradeFeeDenominator,
57 | ownerTradeFeeNumerator,
58 | ownerTradeFeeDenominator,
59 | ownerWithdrawFeeNumerator,
60 | ownerWithdrawFeeDenominator,
61 | } = props.options;
62 |
63 | return (
64 |
66 | <>
67 | LPs Trading Fee:
68 |
72 | props.setOptions({
73 | ...props.options,
74 | tradeFeeNumerator: numerator,
75 | tradeFeeDenominator: denominator,
76 | })
77 | }
78 | />
79 |
80 | <>
81 | Owner Trading Fee:
82 |
86 | props.setOptions({
87 | ...props.options,
88 | ownerTradeFeeNumerator: numerator,
89 | ownerTradeFeeDenominator: denominator,
90 | })
91 | }
92 | />
93 |
94 | <>
95 | Withdraw Fee:
96 |
100 | props.setOptions({
101 | ...props.options,
102 | ownerWithdrawFeeNumerator: numerator,
103 | ownerWithdrawFeeDenominator: denominator,
104 | })
105 | }
106 | />
107 |
108 | <>
109 | Curve Type:
110 |
123 |
124 |
125 |
155 |
156 | renderCustomizedLabel(props, data)}
164 | outerRadius={60}
165 | >
166 | {data.map((entry, index) => (
167 | |
168 | ))}
169 |
170 |
171 |
193 |
181 |
192 |
182 | {data[0].name}: {formatTokenAmount(accountA, mintA)}{" "}
183 | {!isBaseA && formatTokenAmount(accountA, mintA, priceA, "($", ")")}
184 |
185 |
186 | {data[1].name}: {formatTokenAmount(accountB, mintB)}{" "}
187 | {!isBaseB &&
188 | priceB &&
189 | formatTokenAmount(accountB, mintB, priceB, "($", ")")}
190 |
191 |
41 |
53 | );
54 | }
55 |
56 | return null;
57 | };
58 |
59 | export const PoolAccounts = () => {
60 | const pools = useOwnedPools();
61 |
62 | return (
63 | <>
64 | {amount.toFixed(4)}
42 |
43 | {item.isFeeAccount ? " (F) " : " "}
44 |
45 | {getPoolName(env, item.pool)}
51 | Your Liquidity
65 |
74 | {pools.map((p) => (
75 |
78 |
32 | {[0.1, 0.5, 1.0].map((item) => {
33 | return (
34 |
42 | );
43 | })}
44 |
68 | );
69 | };
70 |
71 | export const Settings = () => {
72 | const { providerUrl, setProvider } = useWallet();
73 | const { endpoint, setEndpoint } = useConnectionConfig();
74 |
75 | return (
76 | <>
77 |
45 | {
58 | setValue(x);
59 | const newValue = parseFloat(x) / 100.0;
60 | if (Number.isFinite(newValue)) {
61 | setSlippage(newValue);
62 | }
63 | }}
64 | />
65 | %
66 |
67 |
78 | Transactions: Settings:
79 |
84 |
80 | Slippage:
81 |
83 |
85 | Network:{" "}
86 |
97 |
98 |
99 | Wallet:{" "}
100 |
107 |
108 |
109 | );
110 | };
111 |
--------------------------------------------------------------------------------
/src/components/slippage/style.less:
--------------------------------------------------------------------------------
1 | .slippage-input {
2 | }
3 |
--------------------------------------------------------------------------------
/src/components/tokenIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import { Identicon } from "./../identicon";
2 | import React from "react";
3 | import { getTokenIcon } from "../../utils/utils";
4 | import { useConnectionConfig } from "../../utils/connection";
5 |
6 | export const TokenIcon = (props: {
7 | mintAddress: string;
8 | style?: React.CSSProperties;
9 | }) => {
10 | const { env } = useConnectionConfig();
11 | const icon = getTokenIcon(env, props.mintAddress);
12 |
13 | if (icon) {
14 | return (
15 |
48 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/trade/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Spin } from "antd";
2 | import React, { useState } from "react";
3 | import {
4 | useConnection,
5 | useConnectionConfig,
6 | useSlippageConfig,
7 | } from "../../utils/connection";
8 | import { useWallet } from "../../utils/wallet";
9 | import { CurrencyInput } from "../currencyInput";
10 | import { LoadingOutlined } from "@ant-design/icons";
11 | import { swap, usePoolForBasket } from "../../utils/pools";
12 | import { notify } from "../../utils/notifications";
13 | import { useCurrencyPairState } from "../../utils/currencyPair";
14 | import { generateActionLabel, POOL_NOT_AVAILABLE, SWAP_LABEL } from "../labels";
15 | import "./trade.less";
16 | import { getTokenName } from "../../utils/utils";
17 |
18 | const antIcon =
77 | {
80 | if (A.amount !== val) {
81 | setLastTypedAccount(A.mintAddress);
82 | }
83 |
84 | A.setAmount(val);
85 | }}
86 | amount={A.amount}
87 | mint={A.mintAddress}
88 | onMintChange={(item) => {
89 | A.setMint(item);
90 | }}
91 | />
92 |
95 | {
98 | if (B.amount !== val) {
99 | setLastTypedAccount(B.mintAddress);
100 | }
101 |
102 | B.setAmount(val);
103 | }}
104 | amount={B.amount}
105 | mint={B.mintAddress}
106 | onMintChange={(item) => {
107 | B.setMint(item);
108 | }}
109 | />
110 |
111 |
142 |
143 | );
144 | };
145 |
--------------------------------------------------------------------------------
/src/components/trade/trade.less:
--------------------------------------------------------------------------------
1 | .trade-button {
2 | width: 100%;
3 | position: relative;
4 |
5 | :first-child {
6 | width: 100%;
7 | position: relative;
8 | }
9 | }
10 |
11 | .trade-spinner {
12 | position: absolute;
13 | right: 5px;
14 | }
15 |
16 | .swap-button {
17 | border-radius: 2em;
18 | width: 32px;
19 | padding-left: 8px;
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | import * as serviceWorker from "./serviceWorker";
6 | import { WalletProvider } from "./utils/wallet";
7 | import { ConnectionProvider } from "./utils/connection";
8 | import { AccountsProvider } from "./utils/accounts";
9 | import { CurrencyPairProvider } from "./utils/currencyPair";
10 |
11 | ReactDOM.render(
12 |