10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "algoswap", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.4.0", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "@types/jest": "^24.0.0", 11 | "@types/node": "^12.0.0", 12 | "@types/react": "^16.9.0", 13 | "@types/react-dom": "^16.9.0", 14 | "@types/react-redux": "^7.1.9", 15 | "@types/react-router-dom": "^5.1.5", 16 | "algosdk": "^1.8.1", 17 | "react": "^16.13.1", 18 | "react-dom": "^16.13.1", 19 | "react-redux": "^7.2.1", 20 | "react-router-dom": "^5.2.0", 21 | "react-scripts": "3.4.3", 22 | "rodal": "^1.8.1", 23 | "sass": "^1.32.7", 24 | "typescript": "~3.7.2" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": "react-app" 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "prettier": "2.1.2", 49 | "redux-devtools": "^3.7.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /frontend/public/algosigner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hyplabs/AlgoSwap/4e3f9a977461cd34c246847a0f0d5dbbae5e5ee7/frontend/public/algosigner.png -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hyplabs/AlgoSwap/4e3f9a977461cd34c246847a0f0d5dbbae5e5ee7/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 |
22 |
43 |
23 | WARNING: THIS CODE HAS NOT BEEN AUDITED AND SHOULD NOT BE USED ON THE ALGORAND MAINNET -
24 | USE AT YOUR OWN RISK!
25 |
26 |
28 |
29 |
30 |
32 |
33 |
35 |
36 |
38 |
41 |
42 |
87 |
140 |
155 |
156 | );
157 | };
158 |
159 | export default AddLiquidity;
160 |
--------------------------------------------------------------------------------
/frontend/src/components/CreatePair.scss:
--------------------------------------------------------------------------------
1 | .CreatePair {
2 | position: relative;
3 | margin: auto;
4 | width: 100%;
5 | max-width: 420px;
6 | border-radius: 30px;
7 | border: 2px solid lightgray;
8 | padding: 20px 1.5rem 20px 1.5rem;
9 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
10 |
11 | .CreatePair-header {
12 | display: flex;
13 | justify-content: space-between;
14 | align-items: center;
15 | margin-bottom: 20px;
16 | font-size: 20px;
17 | font-weight: 600;
18 | }
19 |
20 | .CreatePair-plus {
21 | font-size: 16px;
22 | }
23 |
24 | .CreatePair-add {
25 | margin-top: 16px;
26 | background-color: #132d5a;
27 | color: #ffffff;
28 | padding: 8px 16px;
29 | border: 1px solid #132d5a;
30 | border-radius: 8px;
31 | cursor: pointer;
32 | }
33 |
34 | .CreatePair-bottom {
35 | margin-top: 25px;
36 |
37 | .CreatePair-button {
38 | background-color: #a30786;
39 | color: #ffffff;
40 | padding: 10px 15px;
41 | width: 100%;
42 | height: 100%;
43 | font-size: 18px;
44 | border: 1px solid #a30786;
45 | border-radius: 12px;
46 | text-transform: uppercase;
47 | font-weight: 600;
48 | cursor: pointer;
49 |
50 | &:hover {
51 | background-color: #940678;
52 | }
53 | }
54 |
55 | .CreatePair-button-disabled {
56 | background-color: lightgray !important;
57 | border: 1px solid lightgray !important;
58 | }
59 | }
60 |
61 | .Settings-button {
62 | background-color: transparent;
63 | border: transparent;
64 | outline: none;
65 |
66 | .Settings-logo {
67 | height: 25px;
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/frontend/src/components/CreatePair.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 | import {useSelector, useDispatch} from 'react-redux';
3 |
4 | import {selectUserAccountAddress} from '../redux/reducers/user';
5 | import {selectTokenList} from '../redux/reducers/tokens';
6 | import {setAccountAddress, setTokenList, setFirstToken, setSecondToken} from '../redux/actions';
7 |
8 | import TokenAmount from './TokenAmount/TokenAmount';
9 |
10 | import './CreatePair.scss';
11 | import SettingsModal from './common/SettingsModal';
12 | import WalletModal from './common/WalletModal';
13 | import CreatePairModal from './CreatePairModal';
14 |
15 | interface Props {
16 | firstToken: string;
17 | secondToken: string;
18 | updateTokens: (first: string, second: string) => void;
19 | }
20 |
21 | const CreatePair: React.FCAdd Liquidity
88 |
89 | setFirstAmount(amount)}
93 | tokenList={tokenList}
94 | token={firstToken}
95 | updateToken={token => {
96 | dispatch(setFirstToken(token));
97 | updateTokens(token, secondToken);
98 | }}
99 | active={firstTabSelected}
100 | onClick={() => setActiveTab('First')}
101 | />
102 | setSecondAmount(amount)}
107 | tokenList={tokenList}
108 | token={secondToken}
109 | updateToken={token => {
110 | if (firstToken === '') {
111 | dispatch(setFirstToken(tokenList[0][0]));
112 | dispatch(setSecondToken(token));
113 | updateTokens(tokenList[0][0], token);
114 | } else {
115 | dispatch(setSecondToken(token));
116 | updateTokens(firstToken, token);
117 | }
118 | }}
119 | active={secondTabSelected}
120 | onClick={() => setActiveTab('Second')}
121 | />
122 |
123 | +
103 |
124 | {walletAddr ? (
125 |
126 | ) : (
127 |
130 | )}
131 |
132 |
141 |
154 |
142 |
147 |
153 |
143 | 
144 |
145 | Connect to a wallet
146 |
144 |
109 |
187 | );
188 | };
189 |
190 | export default CreatePair;
191 |
--------------------------------------------------------------------------------
/frontend/src/components/CreatePairModal.scss:
--------------------------------------------------------------------------------
1 | .CreatePair-modal {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: flex-start;
6 |
7 | .CreatePair-modal-header {
8 | display: flex;
9 | padding: 10px;
10 | font-size: 18px;
11 | border-bottom: 1px solid lightgray;
12 | font-weight: 700;
13 | .CreatePair-modal-header-image {
14 | display: flex;
15 | align-items: center;
16 | margin-right: 5px;
17 | }
18 | }
19 |
20 | .CreatePair-modal-supply-summary {
21 | display: flex;
22 | flex-direction: column;
23 |
24 | .CreatePair-modal-supply-summary-info {
25 | text-align: left;
26 | font-size: 20px;
27 | padding: 5px;
28 | }
29 | }
30 |
31 | .CreatePair-modal-subtitle {
32 | font-size: 12px;
33 | font-style: italic;
34 | color: gray;
35 | font-weight: 700;
36 | margin-top: 15px;
37 | padding: 15px;
38 | }
39 |
40 | .CreatePair-modal-supply-details {
41 | display: flex;
42 | flex-direction: column;
43 | font-size: 20px;
44 | padding: 20px;
45 | margin-top: 10px;
46 | border-radius: 12px;
47 | border: 2px solid #a30786;
48 | .CreatePair-modal-supply-details-info {
49 | display: flex;
50 | justify-content: space-between;
51 | padding: 5px;
52 | }
53 |
54 | .CreatePair-modal-bottom {
55 | margin-top: 25px;
56 | }
57 | }
58 |
59 | .CreatePair-modal-bottom {
60 | margin-top: 25px;
61 |
62 | .CreatePair-modal-button {
63 | background-color: #a30786;
64 | color: #ffffff;
65 | padding: 10px 15px;
66 | width: 100%;
67 | height: 100%;
68 | font-size: 18px;
69 | border: 1px solid #a30786;
70 | border-radius: 12px;
71 | text-transform: uppercase;
72 | font-weight: 600;
73 | cursor: pointer;
74 |
75 | &:hover {
76 | background-color: #940678;
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/frontend/src/components/CreatePairModal.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | Need to disable typescript check to outsmart Rodal package issue.
3 | If you are making any changes to the code, remove this line temporarily
4 | as we want to pass typecheck testing as much as possible.
5 | */
6 | // @ts-nocheck
7 | import React from 'react';
8 | import {useSelector} from 'react-redux';
9 |
10 | import {selectSlippageTolerance} from '../redux/reducers/transaction';
11 |
12 | /* eslint-disable */
13 | import Rodal from 'rodal';
14 | import 'rodal/lib/rodal.css';
15 |
16 | import './CreatePairModal.scss';
17 |
18 | interface Props {
19 | firstAmount: string;
20 | firstToken: string;
21 | secondAmount: string;
22 | secondToken: string;
23 |
24 | openSupplyModal: boolean;
25 | toggleSupplyModal: () => void;
26 | }
27 |
28 | const CreatePairModal: React.FC
110 | Create a Pair
111 |
112 |
115 |
116 |
117 |
118 | setFirstAmount(amount)}
122 | tokenList={tokenList}
123 | token={firstToken}
124 | updateToken={token => {
125 | dispatch(setFirstToken(token));
126 | updateTokens(token, secondToken);
127 | }}
128 | active={firstTabSelected}
129 | onClick={() => setActiveTab('First')}
130 | />
131 | setSecondAmount(amount)}
136 | tokenList={tokenList}
137 | token={secondToken}
138 | updateToken={token => {
139 | if (firstToken === '') {
140 | dispatch(setFirstToken(tokenList[0][0]));
141 | dispatch(setSecondToken(token));
142 | updateTokens(tokenList[0][0], token);
143 | } else {
144 | dispatch(setSecondToken(token));
145 | updateTokens(firstToken, token);
146 | }
147 | }}
148 | active={secondTabSelected}
149 | onClick={() => setActiveTab('Second')}
150 | />
151 |
152 | +
132 |
153 | {walletAddr ? (
154 |
165 | ) : (
166 |
169 | )}
170 |
171 |
54 |
87 |
55 |
60 |
56 |
57 |
58 | Confirm Supply
59 |
57 |
61 | Supply Summary
62 | {parseFloat(firstAmount) / parseFloat(secondAmount)}
63 |
64 | {firstToken}/{secondToken} Pool Tokens
65 |
66 |
67 |
68 | Output is estimated. If the price changes by more than {slippageTolerance}%, your
69 | transaction will revert.
70 |
71 |
72 |
81 |
73 | {firstToken} Deposited
74 | {firstAmount}
75 |
76 |
77 | {secondToken} Deposited
78 | {secondAmount}
79 |
80 |
82 |
85 |
86 | {liquidity}
17 | ));
18 | };
19 |
20 | render() {
21 | return (
22 |
23 |
46 | );
47 | }
48 | }
49 |
50 | interface Props {}
51 | interface State {
52 | liquidities: string[];
53 | }
54 |
--------------------------------------------------------------------------------
/frontend/src/components/NavigationBar.scss:
--------------------------------------------------------------------------------
1 | .Navbar {
2 | display: flex;
3 | justify-content: space-between;
4 | border-bottom: 2px solid lightgray;
5 | color: black;
6 | height: 55px;
7 |
8 | .Navbar-left,
9 | .Navbar-right {
10 | display: flex;
11 | align-items: center;
12 |
13 | .Navbar-container {
14 | display: inherit;
15 | }
16 | .Navbar-container-active,
17 | .Navbar-container:hover {
18 | display: inherit;
19 | font-weight: 600;
20 | border-bottom: 2px solid #a30786;
21 | }
22 |
23 | a {
24 | margin: 0 8px;
25 | color: black;
26 | text-decoration: none;
27 | font-size: 18px;
28 | }
29 | }
30 |
31 | .Navbar-right {
32 | padding-right: 10px;
33 | }
34 | }
35 | .App-logo-nav {
36 | padding-left: 10px;
37 | margin-right: 8px;
38 | height: 16px;
39 | }
40 |
--------------------------------------------------------------------------------
/frontend/src/components/NavigationBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {useSelector} from 'react-redux';
3 |
4 | import {selectUserAccountAddress} from '../redux/reducers/user';
5 | import {Link, useLocation} from 'react-router-dom';
6 |
7 | import './NavigationBar.scss';
8 |
9 | const NavigationBar: React.FC = () => {
10 | const {pathname} = useLocation();
11 | const accountAddr = useSelector(selectUserAccountAddress);
12 |
13 | return (
14 |
40 | );
41 | };
42 |
43 | export default NavigationBar;
44 |
--------------------------------------------------------------------------------
/frontend/src/components/SwapComponent/SwapComponent.scss:
--------------------------------------------------------------------------------
1 | .SwapComponent {
2 | position: relative;
3 | margin: auto;
4 | width: 100%;
5 | max-width: 420px;
6 | border-radius: 30px;
7 | border: 2px solid lightgray;
8 | padding: 20px 1.5rem 20px 1.5rem;
9 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
10 |
11 | .SwapComponent-header {
12 | display: flex;
13 | justify-content: space-between;
14 | align-items: center;
15 | margin-bottom: 20px;
16 | font-size: 20px;
17 | font-weight: 600;
18 | }
19 |
20 | .SwapComponent-arrow {
21 | font-size: 16px;
22 | }
23 |
24 | .SwapComponent-info {
25 | display: flex;
26 | justify-content: space-between;
27 | font-size: 16px;
28 | font-weight: 600;
29 | color: gray;
30 | margin-top: 25px;
31 | padding: 0px 20px;
32 | }
33 |
34 | .SwapComponent-bottom {
35 | margin-top: 25px;
36 |
37 | .SwapComponent-button {
38 | background-color: #a30786;
39 | color: #ffffff;
40 | padding: 10px 15px;
41 | width: 100%;
42 | height: 100%;
43 | font-size: 18px;
44 | border: 1px solid #a30786;
45 | border-radius: 12px;
46 | text-transform: uppercase;
47 | font-weight: 600;
48 | cursor: pointer;
49 |
50 | &:hover {
51 | background-color: #940678;
52 | }
53 | }
54 |
55 | .SwapComponent-button-disabled {
56 | background-color: lightgray !important;
57 | border: 1px solid lightgray !important;
58 | }
59 | }
60 |
61 | .Settings-button {
62 | background-color: transparent;
63 | border: transparent;
64 | outline: none;
65 |
66 | .Settings-logo {
67 | height: 25px;
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/frontend/src/components/SwapComponent/SwapComponent.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react';
2 | import {useSelector, useDispatch} from 'react-redux';
3 |
4 | import {selectUserAccountAddress} from '../../redux/reducers/user';
5 | import {selectSlippageTolerance} from '../../redux/reducers/transaction';
6 | import {selectFromToken, selectToToken, selectTokenList} from '../../redux/reducers/tokens';
7 | import {setTokenList, setFromToken, setToToken} from '../../redux/actions';
8 |
9 | import TokenAmount from '../TokenAmount/TokenAmount';
10 | import SwapModal from './SwapModal';
11 | import SettingsModal from '../common/SettingsModal';
12 | import WalletModal from '../common/WalletModal';
13 |
14 | import {allPairDetails} from "../../constants";
15 |
16 | import './SwapComponent.scss';
17 |
18 | const SwapComponent: React.FC = () => {
19 | // Local state
20 | const [fromAmount, setFromAmount] = useState
24 |
38 | Your liquidity
25 |
26 |
27 |
30 |
31 |
32 |
35 |
36 |
37 |
39 | {this.state.liquidities.length > 0 ? (
40 | this.renderLiquidities()
41 | ) : (
42 |
45 | No liquidity found.
43 | )} 44 |
108 |
178 | );
179 | };
180 |
181 | export default SwapComponent;
182 |
--------------------------------------------------------------------------------
/frontend/src/components/SwapComponent/SwapModal.scss:
--------------------------------------------------------------------------------
1 | .SwapComponent-swap-modal {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: flex-start;
6 |
7 | .SwapComponent-swap-modal-header {
8 | display: flex;
9 | padding: 10px;
10 | font-size: 18px;
11 | border-bottom: 1px solid lightgray;
12 | font-weight: 700;
13 | .SwapComponent-swap-modal-header-image {
14 | display: flex;
15 | align-items: center;
16 | margin-right: 5px;
17 | }
18 | }
19 |
20 | .SwapComponent-swap-modal-txdetails {
21 | display: flex;
22 | flex-direction: column;
23 | margin-top: 15px;
24 |
25 | .SwapComponent-swap-modal-txdetail {
26 | display: flex;
27 | flex-direction: row;
28 | justify-content: space-between;
29 | font-size: 24px;
30 | font-weight: 700;
31 | padding: 0px 20px;
32 | }
33 |
34 | .SwapComponent-arrow {
35 | font-size: 16px;
36 | }
37 |
38 | .SwapComponent-swap-modal-subtitle {
39 | font-size: 12px;
40 | font-style: italic;
41 | color: gray;
42 | font-weight: 700;
43 | margin-top: 15px;
44 | padding: 15px;
45 | }
46 |
47 | .SwapComponent-swap-modal-txinfo {
48 | display: flex;
49 | justify-content: space-between;
50 | font-size: 20px !important;
51 | padding: 20px;
52 | margin-top: 10px;
53 | border-radius: 12px;
54 | border: 2px solid #a30786;
55 | }
56 | }
57 |
58 | .SwapComponent-swap-modal-bottom {
59 | margin-top: 25px;
60 |
61 | .SwapComponent-swap-modal-button {
62 | background-color: #a30786;
63 | color: #ffffff;
64 | padding: 10px 15px;
65 | width: 100%;
66 | height: 100%;
67 | font-size: 18px;
68 | border: 1px solid #a30786;
69 | border-radius: 12px;
70 | text-transform: uppercase;
71 | font-weight: 600;
72 | cursor: pointer;
73 |
74 | &:hover {
75 | background-color: #940678;
76 | }
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/frontend/src/components/SwapComponent/SwapModal.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | Need to disable typescript check to outsmart Rodal package issue.
3 | If you are making any changes to the code, remove this line temporarily
4 | as we want to pass typecheck testing as much as possible.
5 | */
6 | // @ts-nocheck
7 | import React from 'react';
8 |
9 | /* eslint-disable */
10 | import Rodal from 'rodal';
11 | import 'rodal/lib/rodal.css';
12 |
13 | import './SwapModal.scss';
14 | import swapToken1ForToken2 from "../../services/swapToken1ForToken2";
15 |
16 | interface Props {
17 | fromAmount: string;
18 | toAmount: string;
19 | fromToken: string;
20 | toToken: string;
21 |
22 | openSwapModal: boolean;
23 | toggleSwapModal: () => void;
24 | }
25 |
26 | const SwapModal: React.FC
109 | Swap
110 |
111 |
114 |
115 |
116 |
117 | setFromAmount(amount)}
121 | tokenList={tokenList}
122 | token={fromToken || ''}
123 | updateToken={token => dispatch(setFromToken(token))}
124 | active={fromTabSelected}
125 | onClick={() => setActiveTab('From')}
126 | />
127 | setToAmount(amount)}
132 | tokenList={tokenList}
133 | token={toToken || ''}
134 | updateToken={token => dispatch(setToToken(token))}
135 | active={toTabSelected}
136 | onClick={() => setActiveTab('To')}
137 | />
138 |
139 | ↓
128 |
140 | Slippage Tolerance:
141 | {slippageTolerance.toFixed(2)}%
142 |
143 |
144 | {walletAddr ? (
145 |
156 | ) : (
157 |
160 | )}
161 |
162 |
59 |
98 |
60 |
65 |
61 |
62 |
63 | Confirm Swap
64 |
62 |
66 |
92 |
67 |
68 |
69 | {fromAmount}
70 |
71 | {fromToken}
72 |
73 |
69 | {fromAmount}
70 |
71 | {fromToken}
72 | ↓
74 |
75 |
76 |
77 | {toAmount}
78 |
79 | {toToken}
80 |
81 |
77 | {toAmount}
78 |
79 | {toToken}
80 |
82 | Output is estimated. You will receive at least {toAmount} {toToken} or the transaction
83 | will revert.
84 |
85 |
86 | Price:
87 |
88 | {parseFloat(toAmount) / parseFloat(fromAmount)} {toToken}/{fromToken}
89 |
90 |
91 |
93 |
96 |
97 |
44 | setSelectedToken(token)}
61 | openTokenModal={openTokenModal}
62 | toggleTokenModal={toggleTokenModal}
63 | />
64 |
65 | );
66 | };
67 |
68 | export default TokenAmount;
69 |
--------------------------------------------------------------------------------
/frontend/src/components/TokenAmount/TokenModal.scss:
--------------------------------------------------------------------------------
1 | .TokenAmount-token-modal {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | justify-content: flex-start;
6 |
7 | .TokenAmount-token-modal-header {
8 | display: flex;
9 | padding: 10px;
10 | font-size: 18px;
11 | border-bottom: 1px solid lightgray;
12 | .TokenAmount-token-modal-header-image {
13 | display: flex;
14 | align-items: center;
15 | margin-right: 5px;
16 | }
17 | }
18 | .TokenAmount-token-modal-list {
19 | flex: 1;
20 | overflow-y: auto;
21 | .TokenAmount-token {
22 | display: flex;
23 | border: 2px solid transparent;
24 | border-radius: 12px;
25 | font-size: 24px;
26 | padding: 10px;
27 | margin: 5px;
28 |
29 | &:hover {
30 | border: 2px solid #a30786;
31 | }
32 | }
33 |
34 | .TokenAmount-token-active {
35 | background-color: whitesmoke;
36 | }
37 | }
38 |
39 | .TokenAmount-token-modal-footer {
40 | border-top: 1px solid lightgray;
41 | .TokenAmount-token-modal-close-button {
42 | background-color: #a30786;
43 | color: #ffffff;
44 | padding: 10px 15px;
45 | margin: 10px;
46 | font-size: 18px;
47 | border: 1px solid #a30786;
48 | border-radius: 12px;
49 | text-transform: uppercase;
50 | font-weight: 600;
51 |
52 | &:hover {
53 | background-color: #940678;
54 | }
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/frontend/src/components/TokenAmount/TokenModal.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | Need to disable typescript check to outsmart Rodal package issue.
3 | If you are making any changes to the code, remove this line temporarily
4 | as we want to pass typecheck testing as much as possible.
5 | */
6 | // @ts-nocheck
7 | import React from 'react';
8 |
9 | /* eslint-disable */
10 | import Rodal from 'rodal';
11 | import 'rodal/lib/rodal.css';
12 |
13 | import './TokenModal.scss';
14 |
15 | interface Props {
16 | selectedToken: string;
17 | tokenList?: Array{title}
45 |
46 | updateAmount(evt.target.value)}
51 | value={amount}
52 | />
53 |
56 |
57 |
46 |
83 |
47 |
52 |
48 |
49 |
50 | Select a token
51 |
49 |
53 | {tokenList &&
54 | tokenList.map(token => {
55 | if (token[0] === selectedToken) {
56 | return (
57 |
77 | updateSelectedToken(token[0])}
61 | >
62 | {token[0]}
63 |
64 | );
65 | }
66 | return (
67 | updateSelectedToken(token[0])}
71 | >
72 | {token[0]}
73 |
74 | );
75 | })}
76 |
78 |
81 |
82 |
51 |
68 | Transaction Settings
52 |
53 | Slippage Tolerance
54 |
64 |
55 | updateSlippageTolerance(evt.target.value)}
60 | />
61 | %
62 |
63 |
65 | The transaction will revert if the price changes by more than this percentage.
66 |
67 |
73 |
86 |
74 |
79 |
85 |
75 |
76 |
77 | Connect to a wallet
78 |
76 |
29 |
33 | (firstToken !== '' || secondToken !== '') &&
34 | history.push(`/add/${firstToken}/${secondToken}`)
35 | }
36 | />
37 |
38 | );
39 | };
40 |
41 | interface ParamTypes {
42 | first: string | undefined;
43 | second: string | undefined;
44 | }
45 |
46 | export default AddPage;
47 |
--------------------------------------------------------------------------------
/frontend/src/pages/CreatePage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {useSelector, useDispatch} from 'react-redux';
3 |
4 | import {useHistory, useParams} from 'react-router-dom';
5 | import {selectFirstToken, selectSecondToken} from '../redux/reducers/tokens';
6 | import {setFirstToken, setSecondToken} from '../redux/actions';
7 |
8 | import CreatePair from '../components/CreatePair';
9 |
10 | const CreatePage: React.FC = () => {
11 | const history = useHistory();
12 | const {first, second} = useParams
29 |
33 | (firstToken !== '' || secondToken !== '') &&
34 | history.push(`/create/${firstToken}/${secondToken}`)
35 | }
36 | />
37 |
38 | );
39 | };
40 |
41 | interface ParamTypes {
42 | first: string | undefined;
43 | second: string | undefined;
44 | }
45 |
46 | export default CreatePage;
47 |
--------------------------------------------------------------------------------
/frontend/src/pages/PoolPage.scss:
--------------------------------------------------------------------------------
1 | .PoolPage {
2 | width: 100%;
3 | display: flex;
4 | justify-content: center;
5 | padding: 64px 0;
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/src/pages/PoolPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import LiquidityList from '../components/LiquidityList';
4 | import './PoolPage.scss';
5 |
6 | const PoolPage: React.FC = () => {
7 | return (
8 |
9 |
11 | );
12 | };
13 |
14 | export default PoolPage;
15 |
--------------------------------------------------------------------------------
/frontend/src/pages/SwapPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import SwapComponent from '../components/SwapComponent/SwapComponent';
4 |
5 | const SwapPage: React.FC = () => {
6 | return (
7 |
8 |
10 | );
11 | };
12 |
13 | export default SwapPage;
14 |
--------------------------------------------------------------------------------
/frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///