Skip to content

Commit a371289

Browse files
sameepsisameepsi
authored
Merge pull request QuickSwap#1662 from QuickSwap/dev2
Dev2
2 parents e64ebaa + d58886f commit a371289

File tree

2 files changed

+136
-69
lines changed

2 files changed

+136
-69
lines changed

‎src/assets/images/bridge/across.png‎

2.71 KB
Loading

‎src/pages/Bridge/BridgePage.tsx‎

Lines changed: 136 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import { Box, ButtonBase, Grid, Typography } from '@material-ui/core';
1+
import {
2+
Box,
3+
ButtonBase,
4+
Grid,
5+
MenuItem,
6+
Select,
7+
Typography,
8+
} from '@material-ui/core';
29
import { HypeLabAds, Note } from 'components';
3-
import React, { useMemo, useEffect } from 'react';
10+
import React, { useMemo, useEffect, useState } from 'react';
411
import { useHistory } from 'react-router-dom';
512
import { BridgeBlockItem } from 'components/Bridge';
613
import eth from 'assets/images/bridge/eth.svg';
@@ -16,20 +23,19 @@ import Celer from 'assets/images/bridge/Celer.webp';
1623
import Orbiter from 'assets/images/bridge/Orbiter.webp';
1724
import Nitro from 'assets/images/bridge/Nitro.webp';
1825
import Galaxy from 'assets/images/bridge/Galaxy.webp';
19-
import Image505 from 'assets/images/bridge/Image505.webp';
26+
import manta from 'assets/images/bridge/Image505.webp';
2027
import polygon from 'assets/images/bridge/polygon.svg';
21-
import image525 from 'assets/images/bridge/Image525.webp';
28+
import zkevm from 'assets/images/bridge/Image525.webp';
2229
import Image510 from 'assets/images/bridge/Image510.webp';
23-
import Image511 from 'assets/images/bridge/Image511.webp';
30+
import xlayer from 'assets/images/bridge/Image511.webp';
2431
import Dogechain from 'assets/images/bridge/dog_coin.webp';
2532
import finance from 'assets/images/bridge/finance.svg';
2633
import layer from 'assets/images/bridge/layer.svg';
2734
import squid from 'assets/images/bridge/squid.webp';
2835
import retr from 'assets/images/bridge/retr.webp';
2936
import rubic from 'assets/images/bridge/rubic.webp';
30-
import across from 'assets/images/bridge/across.webp';
37+
import across from 'assets/images/bridge/across.png';
3138
import soneium from 'assets/images/bridge/soneium.webp';
32-
3339
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
3440
import { useActiveWeb3React } from 'hooks';
3541
import { getConfig } from 'config';
@@ -54,101 +60,153 @@ const BridgePage: React.FC = ({}) => {
5460
const bridgeData = [
5561
{
5662
image: jumper,
57-
chains: [eth, polygon, image525],
63+
chains: [eth, polygon, zkevm],
64+
chainNames: ['eth', 'polygon', 'zkevm'],
5865
externalLink: 'https://jumper.exchange/exchange',
5966
},
6067
{
6168
image: Rhino,
62-
chains: [eth, polygon, image525, Image505, Image511],
69+
chains: [eth, polygon, zkevm, manta, xlayer, soneium],
70+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer', 'soneium'],
6371
externalLink: 'https://app.rhino.fi/bridge',
6472
},
6573
{
6674
image: layer,
67-
chains: [eth, polygon, image525, Image505, Image510],
75+
chains: [eth, polygon, zkevm, manta, Image510, soneium],
76+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer', 'soneium'], // Image510 is no xlayer
6877
externalLink: 'https://www.layerswap.io/app',
6978
},
7079
{
7180
image: Symbiosis,
72-
chains: [eth, polygon, image525, Image505],
81+
chains: [eth, polygon, zkevm, manta],
82+
chainNames: ['eth', 'polygon', 'zkevm', 'manta'],
7383
externalLink: 'https://app.symbiosis.finance/bridge',
7484
},
7585
{
7686
image: Interport,
77-
chains: [eth, polygon, image525, Image505],
87+
chains: [eth, polygon, zkevm, manta],
88+
chainNames: ['eth', 'polygon', 'zkevm', 'manta'],
7889
externalLink: 'https://app.interport.fi/bridge',
7990
},
8091
{
8192
image: Owlto,
82-
chains: [eth, polygon, image525, Image505, Image511],
93+
chains: [eth, polygon, zkevm, manta, xlayer],
94+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'],
8395
externalLink: 'https://owlto.finance/',
8496
},
8597
{
8698
image: Meson,
87-
chains: [eth, polygon, image525, Image505],
99+
chains: [eth, polygon, zkevm, manta],
100+
chainNames: ['eth', 'polygon', 'zkevm', 'manta'],
88101
externalLink: 'https://meson.fi/',
89102
},
90103
{
91104
image: Orbiter,
92-
chains: [eth, polygon, image525, Image505, Image511],
105+
chains: [eth, polygon, zkevm, manta, xlayer],
106+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'],
93107
externalLink: 'https://www.orbiter.finance/',
94108
},
95109
{
96110
image: Nitro,
97-
chains: [eth, polygon, image525, Image505, Image511, Dogechain],
111+
chains: [eth, polygon, zkevm, manta, xlayer, Dogechain, soneium],
112+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer', 'doge', 'soneium'],
98113
externalLink: 'https://app.routernitro.com/swap',
99114
},
100115
{
101116
image: finance,
102-
chains: [eth, polygon, image525],
117+
chains: [eth, polygon, zkevm],
118+
chainNames: ['eth', 'polygon', 'zkevm'],
103119
externalLink: 'https://app.xy.finance/',
104120
},
105121
{
106122
image: Celer,
107-
chains: [eth, polygon, image525],
123+
chains: [eth, polygon, zkevm],
124+
chainNames: ['eth', 'polygon', 'zkevm'],
108125
externalLink: 'https://cbridge.celer.network/',
109126
},
110127
{
111128
image: rango,
112-
chains: [eth, polygon, image525],
129+
chains: [eth, polygon, zkevm],
130+
chainNames: ['eth', 'polygon', 'zkevm'],
113131
externalLink: 'https://app.rango.exchange/swap/',
114132
},
115133
{
116134
image: Hop,
117-
chains: [eth, polygon, image525],
135+
chains: [eth, polygon, zkevm],
136+
chainNames: ['eth', 'polygon', 'zkevm'],
118137
isSmallImage: true,
119138
externalLink: 'https://app.hop.exchange/',
120139
},
121140
{
122141
image: Galaxy,
123-
chains: [eth, polygon, Image505],
142+
chains: [eth, polygon, manta],
143+
chainNames: ['eth', 'polygon', 'manta'],
124144
isSmallImage: true,
125145
externalLink: 'https://galaxy.exchange/swap',
126146
},
127147
{
128148
image: squid,
129149
chains: [eth, polygon],
150+
chainNames: ['eth', 'polygon'],
130151
isSmallImage: true,
131152
externalLink: 'https://app.squidrouter.com/',
132153
},
133154
{
134155
image: retr,
135-
chains: [eth, polygon, image525, Image505, Image511],
156+
chains: [eth, polygon, zkevm, manta, xlayer],
157+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'],
136158
isSmallImage: true,
137159
externalLink: 'https://app.retrobridge.io/?utm_source=Quickswap',
138160
},
139161
{
140162
image: rubic,
141-
chains: [eth, polygon, image525, Image505, Image511],
163+
chains: [eth, polygon, zkevm, manta, xlayer],
164+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'],
142165
isSmallImage: true,
143166
externalLink: 'https://app.rubic.exchange/',
144167
},
145168
{
146169
image: across,
147170
chains: [eth, polygon, soneium],
171+
chainNames: ['eth', 'polygon', 'soneium'],
172+
isSmallImage: true,
148173
externalLink: 'https://app.across.to/bridge',
149174
},
150175
];
151176

177+
const networkItems = [
178+
{
179+
value: 'All',
180+
label: 'All',
181+
},
182+
{
183+
value: 'polygon',
184+
label: 'Polygon',
185+
},
186+
{
187+
value: 'eth',
188+
label: 'Etherium',
189+
},
190+
{
191+
value: 'zkevm',
192+
label: 'Polygon Zkevm',
193+
},
194+
{
195+
value: 'manta',
196+
label: 'Manta',
197+
},
198+
{
199+
value: 'xlayer',
200+
label: 'X Layer',
201+
},
202+
{
203+
value: 'soneium',
204+
label: 'Soneium',
205+
},
206+
];
207+
208+
const [selectedNetwork, setSelectedNetwork] = useState<string>('All');
209+
152210
return (
153211
<Box width={'100%'} mb={2}>
154212
<Box margin='24px auto'>
@@ -281,59 +339,68 @@ const BridgePage: React.FC = ({}) => {
281339
>
282340
Select Bridge
283341
</Typography>
284-
{/* <Select
285-
style={{
286-
backgroundColor: '#22314d',
287-
padding: '4px 8px',
288-
borderRadius: '10px',
289-
textDecoration: 'none',
290-
}}
291-
disableUnderline
292-
displayEmpty
293-
value={'all'}
294-
onChange={(e) => {
295-
console.log('🚀 ~ e:', e);
296-
}}
297-
IconComponent={() => <KeyboardArrowDownIcon />}
298-
inputProps={{ 'aria-label': 'Without label' }}
299-
>
300-
<MenuItem value='all'>All</MenuItem>
301-
</Select> */}
342+
<Select
343+
style={{
344+
backgroundColor: '#282d3d',
345+
borderRadius: '10px',
346+
padding: '6px 16px',
347+
fontSize: '14px',
348+
}}
349+
disableUnderline
350+
value={selectedNetwork}
351+
>
352+
{networkItems.map((item) => (
353+
<MenuItem
354+
key={item.value}
355+
value={item.value}
356+
onClick={() => {
357+
setSelectedNetwork(item.value);
358+
}}
359+
>
360+
{item.label}
361+
</MenuItem>
362+
))}
363+
</Select>
302364
</Box>
303365

304366
<Grid container spacing={2}>
305-
{bridgeData.map((item, index) => {
306-
return (
307-
<Grid
308-
key={index}
309-
item
310-
xs={
311-
bridgeData.length % 2 === 1 &&
312-
index === bridgeData.length - 1
313-
? 12
314-
: 6
315-
}
316-
className='flex justify-center'
317-
>
318-
<Box
319-
width={
367+
{bridgeData
368+
.filter((item) => {
369+
if (selectedNetwork === 'All') return true;
370+
return item.chainNames.includes(selectedNetwork);
371+
})
372+
.map((item, index) => {
373+
return (
374+
<Grid
375+
key={index}
376+
item
377+
xs={
320378
bridgeData.length % 2 === 1 &&
321379
index === bridgeData.length - 1
322-
? 1 / 2
323-
: 1
380+
? 12
381+
: 6
324382
}
383+
className='flex justify-center'
325384
>
326-
<BridgeBlockItem
327-
onClick={() => {
328-
window.open(item.externalLink, '_blank');
329-
}}
330-
image={item.image}
331-
chains={item.chains}
332-
/>
333-
</Box>
334-
</Grid>
335-
);
336-
})}
385+
<Box
386+
width={
387+
bridgeData.length % 2 === 1 &&
388+
index === bridgeData.length - 1
389+
? 1 / 2
390+
: 1
391+
}
392+
>
393+
<BridgeBlockItem
394+
onClick={() => {
395+
window.open(item.externalLink, '_blank');
396+
}}
397+
image={item.image}
398+
chains={item.chains}
399+
/>
400+
</Box>
401+
</Grid>
402+
);
403+
})}
337404
</Grid>
338405
</Box>
339406
</Grid>

0 commit comments

Comments
 (0)