174 | { messageType }
175 | { message }
176 |
177 |
178 | }
179 | action={actions}
180 | />
181 | );
182 | }
183 | }
184 |
185 | export default withNamespaces()(MySnackbar);
186 |
--------------------------------------------------------------------------------
/src/assets/icn-metamask.svg:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/src/components/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { withRouter } from "react-router-dom";
3 | import { withStyles } from '@material-ui/core/styles';
4 | import {
5 | Card,
6 | Typography,
7 | } from '@material-ui/core';
8 | import { withNamespaces } from 'react-i18next';
9 | import { colors } from '../../theme'
10 | import FlashOnIcon from '@material-ui/icons/FlashOn';
11 | import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
12 | import SecurityIcon from '@material-ui/icons/Security';
13 | import BarChartIcon from '@material-ui/icons/BarChart';
14 | import PieChartIcon from '@material-ui/icons/PieChart';
15 | import DetailsIcon from '@material-ui/icons/Details';
16 |
17 | const styles = theme => ({
18 | root: {
19 | flex: 1,
20 | display: 'flex',
21 | width: '100%',
22 | justifyContent: 'space-around',
23 | alignItems: 'center',
24 | flexDirection: 'column',
25 | [theme.breakpoints.up('sm')]: {
26 | flexDirection: 'row',
27 | }
28 | },
29 | card: {
30 | flex: '1',
31 | height: '25vh',
32 | width: '100%',
33 | display: 'flex',
34 | justifyContent: 'center',
35 | alignItems: 'center',
36 | flexDirection: 'column',
37 | cursor: 'pointer',
38 | borderRadius: '0px',
39 | transition: 'background-color 0.2s linear',
40 | [theme.breakpoints.up('sm')]: {
41 | height: '100vh',
42 | minWidth: '20%',
43 | minHeight: '50vh',
44 | }
45 | },
46 | earn: {
47 | backgroundColor: colors.white,
48 | '&:hover': {
49 | backgroundColor: colors.pink,
50 | '& .title': {
51 | color: colors.white
52 | },
53 | '& .icon': {
54 | color: colors.white
55 | }
56 | },
57 | '& .title': {
58 | color: colors.pink
59 | },
60 | '& .icon': {
61 | color: colors.pink
62 | }
63 | },
64 | zap: {
65 | backgroundColor: colors.white,
66 | '&:hover': {
67 | backgroundColor: colors.blue,
68 | '& .title': {
69 | color: colors.white,
70 | },
71 | '& .icon': {
72 | color: colors.white
73 | }
74 | },
75 | '& .title': {
76 | color: colors.blue,
77 | display: 'block'
78 | },
79 | '& .soon': {
80 | color: colors.blue,
81 | display: 'none'
82 | },
83 | '& .icon': {
84 | color: colors.blue
85 | },
86 | },
87 | apr: {
88 | backgroundColor: colors.white,
89 | '&:hover': {
90 | backgroundColor: colors.lightBlack,
91 | '& .title': {
92 | color: colors.white
93 | },
94 | '& .icon': {
95 | color: colors.white
96 | }
97 | },
98 | '& .title': {
99 | color: colors.lightBlack
100 | },
101 | '& .icon': {
102 | color: colors.lightBlack
103 | },
104 | },
105 | cover: {
106 | backgroundColor: colors.white,
107 | '&:hover': {
108 | backgroundColor: colors.compoundGreen,
109 | '& .title': {
110 | color: colors.white,
111 | },
112 | '& .icon': {
113 | color: colors.white
114 | }
115 | },
116 | '& .title': {
117 | color: colors.compoundGreen,
118 | },
119 | '& .icon': {
120 | color: colors.compoundGreen
121 | },
122 | },
123 | pool: {
124 | backgroundColor: colors.white,
125 | '&:hover': {
126 | backgroundColor: colors.tomato,
127 | '& .title': {
128 | color: colors.white,
129 | },
130 | '& .icon': {
131 | color: colors.white
132 | }
133 | },
134 | '& .title': {
135 | color: colors.tomato,
136 | },
137 | '& .icon': {
138 | color: colors.tomato
139 | },
140 | },
141 | balancer: {
142 | backgroundColor: colors.white,
143 | '&:hover': {
144 | backgroundColor: colors.purple,
145 | '& .title': {
146 | color: colors.white,
147 | },
148 | '& .icon': {
149 | color: colors.white
150 | }
151 | },
152 | '& .title': {
153 | color: colors.purple,
154 | },
155 | '& .icon': {
156 | color: colors.purple
157 | },
158 | },
159 | title: {
160 | padding: '24px',
161 | paddingBottom: '0px',
162 | [theme.breakpoints.up('sm')]: {
163 | paddingBottom: '24px'
164 | }
165 | },
166 | icon: {
167 | fontSize: '60px',
168 | [theme.breakpoints.up('sm')]: {
169 | fontSize: '100px',
170 | }
171 | },
172 | link: {
173 | textDecoration: 'none'
174 | }
175 | });
176 |
177 | class Home extends Component {
178 |
179 | constructor(props) {
180 | super()
181 |
182 | this.state = {
183 | }
184 | }
185 |
186 | render() {
187 | const { classes, t, location } = this.props;
188 |
189 | console.log(location)
190 |
191 | return (
192 |
193 | { this.nav(location.pathname+'earn') } }>
194 | { t("Home.Earn") }
196 |
197 | { this.nav(location.pathname+'zap') } }>
198 | { t("Home.Zap") }
200 |
201 | { this.nav(location.pathname+'apr') } }>
202 | { t("Home.Apr") }
204 |
205 | { this.nav(location.pathname+'cover') }}>
206 | { t("Home.Cover") }
208 |
209 | { this.nav(location.pathname+'pool') }}>
210 | { t("Home.Pool") }
212 |
213 |
214 |
215 | )
216 | };
217 |
218 | nav = (screen) => {
219 | this.props.history.push(screen)
220 | }
221 | }
222 |
223 | export default withNamespaces()(withRouter(withStyles(styles)(Home)));
224 |
--------------------------------------------------------------------------------
/src/components/pool/pool.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { withRouter } from "react-router-dom";
3 | import { withStyles } from '@material-ui/core/styles';
4 | import {
5 | Tabs,
6 | Tab,
7 | Typography,
8 | Button,
9 | Card
10 | } from '@material-ui/core';
11 | import { withNamespaces } from 'react-i18next';
12 |
13 | import UnlockModal from '../unlock/unlockModal.jsx'
14 | import Deposit from './deposit'
15 | import Withdraw from './withdraw'
16 | import Exchange from './exchange'
17 | import Store from "../../stores";
18 |
19 | import {
20 | ERROR,
21 | GET_POOL_BALANCES,
22 | CONFIGURE_RETURNED
23 | } from '../../constants'
24 |
25 | const styles = theme => ({
26 | root: {
27 | flex: 1,
28 | display: 'flex',
29 | flexDirection: 'column',
30 | maxWidth: '1200px',
31 | width: '100%',
32 | justifyContent: 'center',
33 | alignItems: 'center',
34 | marginTop: '40px'
35 | },
36 | intro: {
37 | width: '100%',
38 | position: 'relative',
39 | display: 'flex',
40 | justifyContent: 'space-between',
41 | alignItems: 'center',
42 | maxWidth: '400px'
43 | },
44 | introCenter: {
45 | minWidth: '100%',
46 | textAlign: 'center',
47 | padding: '48px 0px'
48 | },
49 | investedContainer: {
50 | display: 'flex',
51 | flex: 1,
52 | flexDirection: 'column',
53 | alignItems: 'center',
54 | justifyContent: 'center',
55 | padding: '12px',
56 | minWidth: '100%',
57 | [theme.breakpoints.up('md')]: {
58 | minWidth: '800px',
59 | }
60 | },
61 | connectContainer: {
62 | padding: '12px',
63 | display: 'flex',
64 | justifyContent: 'center',
65 | width: '100%',
66 | maxWidth: '450px',
67 | [theme.breakpoints.up('md')]: {
68 | width: '450',
69 | }
70 | },
71 | actionButton: {
72 | '&:hover': {
73 | backgroundColor: "#2F80ED",
74 | },
75 | padding: '12px',
76 | backgroundColor: "#2F80ED",
77 | borderRadius: '1rem',
78 | border: '1px solid #E1E1E1',
79 | fontWeight: 500,
80 | [theme.breakpoints.up('md')]: {
81 | padding: '15px',
82 | }
83 | },
84 | buttonText: {
85 | fontWeight: '700',
86 | color: 'white',
87 | },
88 | disaclaimer: {
89 | padding: '12px',
90 | border: '1px solid rgb(174, 174, 174)',
91 | borderRadius: '0.75rem',
92 | marginBottom: '24px',
93 | },
94 | card: {
95 | width: '100%',
96 | display: 'flex',
97 | flexWrap: 'wrap',
98 | justifyContent: 'center',
99 | paddingBottom: '20px',
100 | flexDirection: 'column',
101 | alignItems: 'center',
102 | },
103 | })
104 |
105 | const StyledTabs = withStyles({
106 | indicator: {
107 | display: 'flex',
108 | justifyContent: 'center',
109 | backgroundColor: 'transparent',
110 | '& > div': {
111 | maxWidth: 40,
112 | width: '100%',
113 | backgroundColor: '#DC6BE5',
114 | },
115 | },
116 | })(props =>
182 | { !account.address &&
183 |
215 | )
216 | }
217 |
218 | renderModal = () => {
219 | return (
220 |
184 | This project is in beta. Use at your own risk.
185 |
200 | }
201 | { account.address &&
202 |
186 | { t('Pool.Intro') }
187 |
188 |
189 |
198 |
199 |
203 |
204 |
208 |
209 | }
210 | { account.address && value == 0 &&
217 |
233 | )
234 | }
235 |
236 | function a11yProps(index) {
237 | return {
238 | id: `full-width-tab-${index}`,
239 | 'aria-controls': `full-width-tabpanel-${index}`,
240 | };
241 | }
242 |
243 | export default withRouter(withStyles(styles)(Header));
244 |
--------------------------------------------------------------------------------
/src/theme/theme.jsx:
--------------------------------------------------------------------------------
1 | import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
2 |
3 | import WorkSansTTF from '../assets/fonts/WorkSans-VariableFont_wght.ttf';
4 |
5 | const WorkSans = {
6 | fontFamily: 'Work Sans Thin',
7 | fontStyle: 'normal',
8 | fontDisplay: 'swap',
9 | fontWeight: 400,
10 | src: `
11 | local('Work Sans Thin'),
12 | local('Work Sans Thin'),
13 | url(${WorkSansTTF}) format('truetype')
14 | `,
15 | unicodeRange:
16 | 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
17 | };
18 |
19 | export const colors = {
20 | white: "#fff",
21 | black: '#000',
22 | darkBlue: "#2c3b57",
23 | blue: "#2F80ED",
24 | gray: "#e1e1e1",
25 | lightGray: "#737373",
26 | lightBlack: "#6a6a6a",
27 | darkBlack: "#141414",
28 | green: '#1abc9c',
29 | red: '#ed4337',
30 | orange: 'orange',
31 | pink: '#DC6BE5',
32 | compoundGreen: '#00d395',
33 | tomato: '#e56b73',
34 | purple: '#935dff',
35 |
36 | text: "#212529",
37 | lightBlue: "#2F80ED",
38 | topaz: "#0b8f92",
39 | darkGray: "rgba(43,57,84,.5)",
40 | borderBlue: 'rgba(25, 101, 233, 0.5)'
41 | };
42 |
43 | const breakpoints = createBreakpoints({
44 | keys: ["xs", "sm", "md", "lg", "xl"],
45 | values: {
46 | xs: 0,
47 | sm: 600,
48 | md: 900,
49 | lg: 1200,
50 | xl: 1800
51 | }
52 | })
53 |
54 | const iswapTheme = {
55 | typography: {
56 | fontFamily: [
57 | '"Work Sans Thin"',
58 | 'BlinkMacSystemFont',
59 | '"Segoe UI"',
60 | 'Roboto',
61 | '"Helvetica Neue"',
62 | 'Arial',
63 | 'sans-serif',
64 | '"Apple Color Emoji"',
65 | '"Segoe UI Emoji"',
66 | '"Segoe UI Symbol"',
67 | ].join(','),
68 | h1: {
69 | fontSize: '48px',
70 | fontWeight: '600',
71 | WebkitFontSmoothing: "antialiased",
72 | MozOsxFontSmoothing: "grayscale",
73 | lineHeight: 1.2
74 | },
75 | h2: {
76 | fontSize: '36px',
77 | fontWeight: '600',
78 | WebkitFontSmoothing: "antialiased",
79 | MozOsxFontSmoothing: "grayscale",
80 | lineHeight: 1.2
81 | },
82 | h3: {
83 | fontSize: '24px',
84 | fontWeight: '600',
85 | WebkitFontSmoothing: "antialiased",
86 | MozOsxFontSmoothing: "grayscale",
87 | lineHeight: 1.2
88 | },
89 | h4: {
90 | fontSize: '16px',
91 | fontWeight: '600',
92 | WebkitFontSmoothing: "antialiased",
93 | MozOsxFontSmoothing: "grayscale",
94 | lineHeight: 1.2
95 | },
96 | h5: {
97 | fontSize: '14px',
98 | fontWeight: '600',
99 | WebkitFontSmoothing: "antialiased",
100 | MozOsxFontSmoothing: "grayscale",
101 | lineHeight: 1.2
102 | },
103 | body1: {
104 | fontSize: '16px',
105 | fontWeight: '300',
106 | WebkitFontSmoothing: "antialiased",
107 | MozOsxFontSmoothing: "grayscale",
108 | },
109 | body2: {
110 | fontSize: '16px',
111 | fontWeight: '300',
112 | WebkitFontSmoothing: "antialiased",
113 | MozOsxFontSmoothing: "grayscale",
114 | },
115 | },
116 | type: 'light',
117 | overrides: {
118 | MuiCssBaseline: {
119 | '@global': {
120 | '@font-face': [WorkSans],
121 | },
122 | },
123 | MuiSelect: {
124 | select: {
125 | padding: '9px'
126 | },
127 | selectMenu: {
128 | minHeight: '30px',
129 | display: 'flex',
130 | alignItems: 'center'
131 | }
132 | },
133 | MuiButton: {
134 | root: {
135 | borderRadius: '50px',
136 | padding: '10px 24px'
137 | },
138 | outlined: {
139 | padding: '10px 24px',
140 | borderWidth: '2px !important'
141 | },
142 | text: {
143 | padding: '10px 24px'
144 | },
145 | label: {
146 | textTransform: 'none',
147 | fontSize: '1rem'
148 | }
149 | },
150 | MuiInputBase: {
151 | input: {
152 | fontSize: '16px',
153 | fontWeight: '600',
154 | WebkitFontSmoothing: "antialiased",
155 | MozOsxFontSmoothing: "grayscale",
156 | lineHeight: 1.2
157 | }
158 | },
159 | MuiOutlinedInput: {
160 | adornedEnd: {
161 |
162 | },
163 | input: {
164 | "&::placeholder": {
165 | color: colors.text
166 | },
167 | color: colors.text,
168 | padding: '14px',
169 | borderRadius: '50px'
170 | },
171 | root: {
172 | // border: "none !important",
173 | borderRadius: '50px'
174 | },
175 | notchedOutline: {
176 | // border: "none !important"
177 | }
178 | },
179 | MuiSnackbar : {
180 | root: {
181 | maxWidth: 'calc(100vw - 24px)'
182 | },
183 | anchorOriginBottomLeft: {
184 | bottom: '12px',
185 | left: '12px',
186 | '@media (min-width: 960px)': {
187 | bottom: '50px',
188 | left: '80px'
189 | }
190 | }
191 | },
192 | MuiSnackbarContent: {
193 | root: {
194 | backgroundColor: colors.white,
195 | padding: '0px',
196 | minWidth: 'auto',
197 | '@media (min-width: 960px)': {
198 | minWidth: '500px',
199 | }
200 | },
201 | message: {
202 | padding: '0px'
203 | },
204 | action: {
205 | marginRight: '0px'
206 | }
207 | },
208 | MuiExpansionPanel: {
209 | root: {
210 | border: '1px solid '+colors.borderBlue,
211 | borderRadius: '50px',
212 | margin: '8px 0px',
213 | '&:before': { //underline color when textfield is inactive
214 | backgroundColor: 'none',
215 | height: '0px'
216 | },
217 | }
218 | },
219 | MuiInput: {
220 | underline: {
221 | '&:before': { //underline color when textfield is inactive
222 | borderBottom: 'none !important'
223 | },
224 | '&:after': { //underline color when textfield is inactive
225 | borderBottom: 'none !important'
226 | },
227 | }
228 | },
229 | MuiExpansionPanelSummary: {
230 | root: {
231 | padding: '30px 42px'
232 | },
233 | content: {
234 | margin: '0px !important'
235 | }
236 | },
237 | MuiExpansionPanelDetails: {
238 | root: {
239 | padding: '0 12px 15px 12px',
240 | '@media (min-width: 960px)': {
241 | padding: '0 24px 30px 24px',
242 | }
243 | }
244 | },
245 | MuiToggleButton: {
246 | root: {
247 | borderRadius: '50px',
248 | textTransform: 'none',
249 | minWidth: '100px',
250 | border: 'none',
251 | '& > span > h4': {
252 | color: '#555',
253 | },
254 | '&:hover': {
255 | backgroundColor: "rgba(47,128,237, 0.2)",
256 | },
257 | "&$selected": {
258 | backgroundColor: '#2f80ed',
259 | '& > span > h4': {
260 | color: '#fff',
261 | },
262 | '&:hover': {
263 | backgroundColor: "rgba(47,128,237, 0.2)",
264 | '& > span > h4': {
265 | color: '#000',
266 | },
267 | },
268 | }
269 | }
270 | },
271 | MuiPaper: {
272 | elevation1: {
273 | boxShadow: 'none'
274 | }
275 | },
276 | MuiToggleButtonGroup: {
277 | root: {
278 | border: '1px solid '+colors.borderBlue,
279 | borderRadius: '50px',
280 | },
281 | groupedSizeSmall: {
282 | padding: '42px 30px'
283 | }
284 | },
285 | MuiFormControlLabel: {
286 | label: {
287 | color: colors.darkBlack
288 | }
289 | }
290 | },
291 | palette: {
292 | primary: {
293 | main: colors.blue
294 | },
295 | secondary: {
296 | main: colors.topaz
297 | },
298 | text: {
299 | primary: colors.text,
300 | secondary: colors.text
301 | }
302 | },
303 | breakpoints: breakpoints
304 | };
305 |
306 | export default iswapTheme;
307 |
--------------------------------------------------------------------------------
/src/components/unlock/unlock.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { withRouter } from "react-router-dom";
3 | import { withStyles } from '@material-ui/core/styles';
4 | import {
5 | Typography,
6 | Button,
7 | CircularProgress
8 | } from '@material-ui/core';
9 | import CloseIcon from '@material-ui/icons/Close';
10 | import { withNamespaces } from 'react-i18next';
11 |
12 | import {
13 | Web3ReactProvider,
14 | useWeb3React,
15 | } from "@web3-react/core";
16 | import { Web3Provider } from "@ethersproject/providers";
17 | import { useEagerConnect, useInactiveListener } from "./hooks";
18 |
19 | import {
20 | ERROR,
21 | CONNECTION_DISCONNECTED,
22 | CONNECTION_CONNECTED
23 | } from '../../constants'
24 |
25 | import Store from "../../stores";
26 | const emitter = Store.emitter
27 | const store = Store.store
28 |
29 | const styles = theme => ({
30 | root: {
31 | flex: 1,
32 | height: 'auto',
33 | display: 'flex',
34 | position: 'relative'
35 | },
36 | contentContainer: {
37 | margin: 'auto',
38 | textAlign: 'center',
39 | padding: '12px',
40 | display: 'flex',
41 | flexWrap: 'wrap'
42 | },
43 | cardContainer: {
44 | marginTop: '60px',
45 | minHeight: '260px',
46 | display: 'flex',
47 | flexDirection: 'column',
48 | justifyContent: 'space-around',
49 | alignItems: 'center'
50 | },
51 | unlockCard: {
52 | padding: '24px'
53 | },
54 | buttonText: {
55 | marginLeft: '12px',
56 | fontWeight: '700',
57 | },
58 | instruction: {
59 | maxWidth: '400px',
60 | marginBottom: '32px',
61 | marginTop: '32px'
62 | },
63 | actionButton: {
64 | padding: '12px',
65 | backgroundColor: 'white',
66 | borderRadius: '3rem',
67 | border: '1px solid #E1E1E1',
68 | fontWeight: 500,
69 | [theme.breakpoints.up('md')]: {
70 | padding: '15px',
71 | }
72 | },
73 | connect: {
74 | width: '100%'
75 | },
76 | closeIcon: {
77 | position: 'fixed',
78 | right: '12px',
79 | top: '12px',
80 | cursor: 'pointer'
81 | }
82 | });
83 |
84 | class Unlock extends Component {
85 |
86 | constructor(props) {
87 | super()
88 |
89 | this.state = {
90 | error: null,
91 | metamaskLoading: false,
92 | ledgerLoading: false
93 | }
94 | }
95 |
96 | componentWillMount() {
97 | emitter.on(CONNECTION_CONNECTED, this.connectionConnected);
98 | emitter.on(CONNECTION_DISCONNECTED, this.connectionDisconnected);
99 | emitter.on(ERROR, this.error);
100 | };
101 |
102 | componentWillUnmount() {
103 | emitter.removeListener(CONNECTION_CONNECTED, this.connectionConnected);
104 | emitter.removeListener(CONNECTION_DISCONNECTED, this.connectionDisconnected);
105 | emitter.removeListener(ERROR, this.error);
106 | };
107 |
108 | error = (err) => {
109 | this.setState({ loading: false, error: err, metamaskLoading: false, ledgerLoading: false })
110 | };
111 |
112 | connectionConnected = () => {
113 | if(this.props.closeModal != null) {
114 | this.props.closeModal()
115 | }
116 | }
117 |
118 | connectionDisconnected = () => {
119 | if(this.props.closeModal != null) {
120 | this.props.closeModal()
121 | }
122 | }
123 |
124 | metamaskUnlocked = () => {
125 | this.setState({ metamaskLoading: false })
126 | if(this.props.closeModal != null) {
127 | this.props.closeModal()
128 | }
129 | }
130 |
131 | ledgerUnlocked = () => {
132 | this.setState({ ledgerLoading: false })
133 | if(this.props.closeModal != null) {
134 | this.props.closeModal()
135 | }
136 | }
137 |
138 | cancelLedger = () => {
139 | this.setState({ ledgerLoading: false })
140 | }
141 |
142 | cancelMetamask = () => {
143 | this.setState({ metamaskLoading: false })
144 | }
145 |
146 | render() {
147 | const { classes, closeModal, t } = this.props;
148 |
149 | return (
150 | { nav('earn') } }>
218 | Earn
219 |
220 | { nav('zap') } }>
221 | Zap
222 |
223 | { nav('apr') } }>
224 | APR
225 |
226 | { nav('cover') } }>
227 | Cover
228 |
229 | { nav('pool') } }>
230 | Pool
231 |
232 |
151 |
158 | )
159 | };
160 | }
161 |
162 | function getLibrary(provider) {
163 |
164 | const library = new Web3Provider(provider);
165 | library.pollingInterval = 8000;
166 | return library;
167 | }
168 |
169 | function onConnectionClicked(currentConnector, name, setActivatingConnector, activate) {
170 | const connectorsByName = store.getStore('connectorsByName')
171 | setActivatingConnector(currentConnector);
172 | activate(connectorsByName[name]);
173 | }
174 |
175 | function onDeactivateClicked(deactivate, connector) {
176 | if(deactivate) {
177 | deactivate()
178 | }
179 | if(connector && connector.close) {
180 | connector.close()
181 | }
182 | store.setStore({ account: { }, web3context: null })
183 | emitter.emit(CONNECTION_DISCONNECTED)
184 | }
185 |
186 | function MyComponent(props) {
187 |
188 | const context = useWeb3React();
189 | const localContext = store.getStore('web3context');
190 | var localConnector = null;
191 | if (localContext) {
192 | localConnector = localContext.connector
193 | }
194 | const {
195 | connector,
196 | library,
197 | account,
198 | activate,
199 | deactivate,
200 | active,
201 | error
202 | } = context;
203 | var connectorsByName = store.getStore('connectorsByName')
204 |
205 | const { closeModal, t } = props
206 |
207 | const [activatingConnector, setActivatingConnector] = React.useState();
208 | React.useEffect(() => {
209 | if (activatingConnector && activatingConnector === connector) {
210 | setActivatingConnector(undefined);
211 | }
212 | }, [activatingConnector, connector]);
213 |
214 | React.useEffect(() => {
215 | if (account && active && library) {
216 | store.setStore({ account: { address: account }, web3context: context })
217 | emitter.emit(CONNECTION_CONNECTED)
218 | }
219 | }, [account, active, closeModal, context, library]);
220 |
221 | // React.useEffect(() => {
222 | // if (storeContext && storeContext.active && !active) {
223 | // console.log("we are deactive: "+storeContext.account)
224 | // store.setStore({ account: {}, web3context: null })
225 | // }
226 | // }, [active, storeContext]);
227 |
228 | // handle logic to eagerly connect to the injected ethereum provider, if it exists and has granted access already
229 | const triedEager = useEagerConnect();
230 |
231 | // handle logic to connect in reaction to certain events on the injected ethereum provider, if it exists
232 | useInactiveListener(!triedEager || !!activatingConnector);
233 | const width = window.innerWidth
234 |
235 | return (
236 |
153 |
154 |
156 |
157 | 650 ? 'space-between' : 'center'), alignItems: 'center' }}>
237 | {Object.keys(connectorsByName).map(name => {
238 | const currentConnector = connectorsByName[name];
239 | const activating = currentConnector === activatingConnector;
240 | const connected = (currentConnector === connector||currentConnector === localConnector);
241 | const disabled =
242 | !triedEager || !!activatingConnector || !!error;
243 |
244 | var url;
245 | var display = name;
246 | if (name === 'MetaMask') {
247 | url = require('../../assets/icn-metamask.svg')
248 | } else if (name === 'WalletConnect') {
249 | url = require('../../assets/walletConnectIcon.svg')
250 | } else if (name === 'TrustWallet') {
251 | url = require('../../assets/trustWallet.png')
252 | } else if (name === 'Portis') {
253 | url = require('../../assets/portisIcon.png')
254 | } else if (name === 'Fortmatic') {
255 | url = require('../../assets/fortmaticIcon.png')
256 | } else if (name === 'Ledger') {
257 | url = require('../../assets/icn-ledger.svg')
258 | } else if (name === 'Squarelink') {
259 | url = require('../../assets/squarelink.png')
260 | } else if (name === 'Trezor') {
261 | url = require('../../assets/trezor.png')
262 | } else if (name === 'Torus') {
263 | url = require('../../assets/torus.jpg')
264 | } else if (name === 'Authereum') {
265 | url = require('../../assets/icn-aethereum.svg')
266 | } else if (name === 'WalletLink') {
267 | display = 'Coinbase Wallet'
268 | url = require('../../assets/coinbaseWalletIcon.svg')
269 | } else if (name === 'Frame') {
270 | return ''
271 | }
272 |
273 | return (
274 |
341 | )
342 |
343 | }
344 |
345 | export default withNamespaces()(withRouter(withStyles(styles)(Unlock)));
346 |
--------------------------------------------------------------------------------
/src/assets/walletConnectIcon.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/components/pool/deposit/deposit.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { withRouter } from "react-router-dom";
3 | import { withStyles } from '@material-ui/core/styles';
4 | import {
5 | Card,
6 | Typography,
7 | Button,
8 | InputAdornment,
9 | TextField
10 | } from '@material-ui/core';
11 |
12 | import Loader from '../../loader'
13 | import Snackbar from '../../snackbar'
14 |
15 | import { colors } from '../../../theme'
16 |
17 | import {
18 | ERROR,
19 | GET_POOL_BALANCES,
20 | POOL_BALANCES_RETURNED,
21 | DEPOSIT_POOL,
22 | DEPOSIT_POOL_RETURNED,
23 | GET_DEPOSIT_PRICE,
24 | DEPOSIT_PRICE_RETURNED,
25 | GET_WITHDRAW_PRICE,
26 | WITHDRAW_PRICE_RETURNED,
27 | } from '../../../constants'
28 |
29 | import { withNamespaces } from 'react-i18next';
30 | import Store from "../../../stores";
31 | const emitter = Store.emitter
32 | const dispatcher = Store.dispatcher
33 | const store = Store.store
34 |
35 | const styles = theme => ({
36 | root: {
37 | flex: 1,
38 | display: 'flex',
39 | flexDirection: 'column',
40 | maxWidth: '1200px',
41 | width: '100%',
42 | justifyContent: 'flex-start',
43 | alignItems: 'center'
44 | },
45 | introText: {
46 | flex: 1
47 | },
48 | intro: {
49 | width: '100%',
50 | position: 'relative',
51 | display: 'flex',
52 | justifyContent: 'center',
53 | alignItems: 'center',
54 | },
55 | introCenter: {
56 | minWidth: '100%',
57 | textAlign: 'center',
58 | padding: '48px 0px'
59 | },
60 | investedContainer: {
61 | display: 'flex',
62 | flex: 1,
63 | flexDirection: 'column',
64 | alignItems: 'center',
65 | justifyContent: 'center',
66 | padding: '12px',
67 | minWidth: '100%',
68 | [theme.breakpoints.up('md')]: {
69 | minWidth: '800px',
70 | }
71 | },
72 | connectContainer: {
73 | padding: '12px',
74 | display: 'flex',
75 | justifyContent: 'center',
76 | width: '100%',
77 | maxWidth: '450px',
78 | [theme.breakpoints.up('md')]: {
79 | width: '450',
80 | }
81 | },
82 | actionButton: {
83 | '&:hover': {
84 | backgroundColor: "#2F80ED",
85 | },
86 | padding: '12px',
87 | backgroundColor: "#2F80ED",
88 | borderRadius: '1rem',
89 | border: '1px solid #E1E1E1',
90 | fontWeight: 500,
91 | [theme.breakpoints.up('md')]: {
92 | padding: '15px',
93 | }
94 | },
95 | buttonText: {
96 | fontWeight: '700',
97 | color: 'white',
98 | },
99 | disaclaimer: {
100 | padding: '12px',
101 | border: '1px solid rgb(174, 174, 174)',
102 | borderRadius: '0.75rem',
103 | marginBottom: '24px',
104 | },
105 | aUSDCard: {
106 | display: 'flex',
107 | justifyContent: 'space-between',
108 | overflow: 'hidden',
109 | flex: 1,
110 | whiteSpace: 'nowrap',
111 | fontSize: '0.83rem',
112 | padding: '28px 30px',
113 | borderRadius: '50px',
114 | border: '1px solid '+colors.borderBlue,
115 | alignItems: 'center',
116 | maxWidth: '500px',
117 | marginTop: '40px',
118 | background: colors.white,
119 | [theme.breakpoints.up('md')]: {
120 | width: '100%'
121 | }
122 | },
123 | aUSDBalance: {
124 | display: 'flex',
125 | alignItems: 'center'
126 | },
127 | addressContainer: {
128 | display: 'flex',
129 | justifyContent: 'space-between',
130 | overflow: 'hidden',
131 | flex: 1,
132 | whiteSpace: 'nowrap',
133 | fontSize: '0.83rem',
134 | textOverflow:'ellipsis',
135 | cursor: 'pointer',
136 | padding: '28px 30px',
137 | borderRadius: '50px',
138 | border: '1px solid '+colors.borderBlue,
139 | alignItems: 'center',
140 | maxWidth: '500px',
141 | [theme.breakpoints.up('md')]: {
142 | width: '100%'
143 | }
144 | },
145 | card: {
146 | width: '100%',
147 | display: 'flex',
148 | flexWrap: 'wrap',
149 | maxWidth: '800px',
150 | justifyContent: 'center',
151 | flexDirection: 'column',
152 | alignItems: 'center',
153 | },
154 | inputContainer: {
155 | flex: 1,
156 | display: 'flex',
157 | flexWrap: 'wrap',
158 | padding: '42px 30px',
159 | borderRadius: '50px',
160 | flexDirection: 'column',
161 | justifyContent: 'flex-start',
162 | alignItems: 'center',
163 | margin: '40px 0px',
164 | border: '1px solid '+colors.borderBlue,
165 | minWidth: '500px',
166 | },
167 | actionInput: {
168 | padding: '0px 0px 12px 0px',
169 | fontSize: '0.5rem'
170 | },
171 | inputAdornment: {
172 | fontWeight: '600',
173 | fontSize: '1.5rem'
174 | },
175 | assetIcon: {
176 | display: 'inline-block',
177 | verticalAlign: 'middle',
178 | borderRadius: '25px',
179 | background: '#dedede',
180 | height: '30px',
181 | width: '30px',
182 | textAlign: 'center',
183 | marginRight: '16px'
184 | },
185 | balances: {
186 | width: '100%',
187 | textAlign: 'right',
188 | paddingRight: '20px',
189 | cursor: 'pointer'
190 | },
191 | title: {
192 | paddingRight: '24px'
193 | },
194 | value: {
195 | cursor: 'pointer'
196 | },
197 | valContainer: {
198 | display: 'flex',
199 | flexDirection: 'column',
200 | width: '100%'
201 | },
202 | inputCardHeading: {
203 | width: '100%',
204 | color: colors.darkGray
205 | },
206 | placceholder: {
207 | marginBottom: '12px'
208 | },
209 | ratios: {
210 | marginBottom: '12px'
211 | },
212 | idealHolder: {
213 | display: 'flex'
214 | },
215 | disabledAdornment: {
216 | color: 'rgb(170, 170, 170)'
217 | },
218 | walletAddress: {
219 | padding: '0px 12px'
220 | },
221 | walletTitle: {
222 | flex: 1,
223 | color: colors.darkGray
224 | },
225 | });
226 |
227 | class Deposit extends Component {
228 |
229 | constructor() {
230 | super()
231 |
232 | const account = store.getStore('account')
233 | const assets = store.getStore('assets')
234 |
235 | this.state = {
236 | loading: !assets,
237 | account: account,
238 | assets: assets ? assets.filter((asset) => { return asset.balance > 0 }) : null,
239 | }
240 | }
241 |
242 | componentWillMount() {
243 | emitter.on(ERROR, this.errorReturned);
244 | emitter.on(POOL_BALANCES_RETURNED, this.balancesReturned);
245 | emitter.on(DEPOSIT_POOL_RETURNED, this.depositPoolReturned);
246 | }
247 |
248 | componentWillUnmount() {
249 | emitter.removeListener(ERROR, this.errorReturned);
250 | emitter.removeListener(POOL_BALANCES_RETURNED, this.balancesReturned);
251 | emitter.removeListener(DEPOSIT_POOL_RETURNED, this.depositPoolReturned);
252 | };
253 |
254 | depositPoolReturned = (txHash) => {
255 | this.setState({ snackbarMessage: null, snackbarType: null, loading: false })
256 | const that = this
257 | setTimeout(() => {
258 | const snackbarObj = { snackbarMessage: txHash, snackbarType: 'Hash' }
259 | that.setState(snackbarObj)
260 | })
261 | };
262 |
263 | balancesReturned = (balances) => {
264 | const assets = store.getStore('assets')
265 | this.setState({
266 | loading: false,
267 | assets: assets ? assets.filter((asset) => { return asset.balance > 0 }) : null
268 | })
269 | };
270 |
271 | errorReturned = (error) => {
272 | const snackbarObj = { snackbarMessage: null, snackbarType: null }
273 | this.setState(snackbarObj)
274 | this.setState({ loading: false })
275 | const that = this
276 | setTimeout(() => {
277 | const snackbarObj = { snackbarMessage: error.toString(), snackbarType: 'Error' }
278 | that.setState(snackbarObj)
279 | })
280 | };
281 |
282 | render() {
283 | const { classes, t } = this.props;
284 | const {
285 | account,
286 | assets,
287 | loading,
288 | snackbarMessage
289 | } = this.state
290 |
291 | var address = null;
292 | if (account && account.address) {
293 | address = account.address.substring(0,6)+'...'+account.address.substring(account.address.length-4,account.address.length)
294 | }
295 |
296 | return (
297 |
275 |
313 |
314 | )
315 | }) }
316 |
317 |
318 |
339 |
340 |
298 |
348 | )
349 | };
350 |
351 | renderDepositAssets = () => {
352 | const assets = this.state.assets
353 |
354 | return assets.map((asset) => {
355 | return this.renderAssetInput(asset, 'deposit')
356 | })
357 | }
358 |
359 | renderAssetInput = (asset, type) => {
360 | const {
361 | classes
362 | } = this.props
363 |
364 | const {
365 | loading
366 | } = this.state
367 |
368 | const amount = this.state[asset.id + '_' + type]
369 | const amountError = this.state[asset.id + '_' + type + '_error']
370 |
371 | return (
372 |
299 | This project is in beta. Use at your own risk.
300 |
345 | { snackbarMessage && this.renderSnackbar() }
346 | { loading &&
301 |
302 | Wallet
303 | { address }
304 |
305 |
306 |
307 | {/*
308 | { aUSD.name }
316 |
*/}
321 |
309 | 
314 |
315 |
317 | { aUSD.balance }
318 | { aUSD.symbol }
319 |
320 |
322 |
323 | { !assets &&
324 | Loading assets ...
325 | }
326 | { assets &&
327 |
328 | { t("PoolDeposit.Deposit") }
329 | { this.renderDepositAssets() }
330 |
340 |
341 | }
342 |
343 |
344 |
373 |
402 | )
403 | }
404 |
405 | onDeposit = () => {
406 | this.setState({ amountError: false })
407 | let state = this.state
408 |
409 | const sendAssets = state.assets.map((asset) => {
410 | asset.amount = state[asset.id + '_deposit']
411 | if(asset.amount == null || asset.amount === '') {
412 | asset.amount = 0
413 | }
414 | return asset
415 | }).filter((asset) => {
416 | return asset.amount > 0
417 | })
418 |
419 | if(sendAssets.length > 0) {
420 | this.setState({ loading: true })
421 | dispatcher.dispatch({ type: DEPOSIT_POOL, content: { assets: sendAssets } })
422 | }
423 | }
424 |
425 | renderSnackbar = () => {
426 | var {
427 | snackbarType,
428 | snackbarMessage
429 | } = this.state
430 | return
374 | { this.setAmount(asset.id, type, (asset ? asset.balance : 0)) } } className={ classes.value } noWrap>{ 'Balance: '+ ( asset && asset.balance ? (Math.floor(asset.balance*10000)/10000).toFixed(4) : '0.0000') } { asset ? asset.symbol : '' }
375 |
376 |
377 | { asset.symbol } ,
389 | startAdornment:
390 | ,
398 | }}
399 | />
400 |
401 |
391 |
396 |
397 |
299 |
348 | )
349 | };
350 |
351 | onWithdraw = () => {
352 | this.setState({ amountError: false })
353 | let state = this.state
354 |
355 | const sendAssets = state.assets.map((asset) => {
356 | asset.amount = state[asset.id + '_withdraw']
357 | if(asset.amount == null || asset.amount === '') {
358 | asset.amount = 0
359 | }
360 | return asset
361 | }).filter((asset) => {
362 | return asset.amount > 0
363 | })
364 |
365 | if(sendAssets.length > 0) {
366 | this.setState({ loading: true })
367 | dispatcher.dispatch({ type: WITHDRAW_POOL, content: { assets: sendAssets } })
368 | }
369 | }
370 |
371 | renderModal = () => {
372 | return (
373 |
300 | This project is in beta. Use at your own risk.
301 |
323 | { !assets &&
324 | Loading assets ...
325 | }
326 | { assets &&
327 |
328 | { t("PoolWithdraw.Withdraw") }
329 | { this.renderWithdrawAssets() }
330 |
340 |
341 | }
342 |
343 |
344 | { modalOpen && this.renderModal() }
345 | { snackbarMessage && this.renderSnackbar() }
346 | { loading &&
302 |
303 | Wallet
304 | { address }
305 |
306 |
307 |
308 | {/*
309 | { aUSD.name }
317 |
*/}
322 |
310 |
315 |
316 |
318 | { aUSD.balance }
319 | { aUSD.symbol }
320 |
321 |
421 |
450 | )
451 | }
452 |
453 | setAmount = (id, type, balance) => {
454 | const bal = (Math.floor((balance === '' ? '0' : balance)*10000)/10000).toFixed(4)
455 | let val = []
456 | val[id + '_' + type] = bal
457 | this.setState(val)
458 | }
459 |
460 | }
461 |
462 | export default withNamespaces()(withRouter(withStyles(styles)(Withdraw)));
463 |
--------------------------------------------------------------------------------
422 | { this.setAmount(asset.id, type, (asset ? asset.uniBalance : 0)) } } className={ classes.value } noWrap>{ 'Balance: '+ ( asset && asset.uniBalance ? (Math.floor(asset.uniBalance*10000)/10000).toFixed(4) : '0.0000') } { asset ? (asset.symbol+'UNI') : '' }
423 |
424 |
425 | { (asset.symbol+'UNI') } ,
437 | startAdornment:
438 | ,
446 | }}
447 | />
448 |
449 |
439 |
444 |
445 |