Skip to content

Commit f9cb5ae

Browse files
sameepsisameepsi
authored
Merge pull request #1657 from webdev403/feat/new-third-party-bridges
New third party bridges added
2 parents df078c0 + 6d14dd2 commit f9cb5ae

File tree

2 files changed

+132
-69
lines changed

2 files changed

+132
-69
lines changed

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

2.71 KB
Loading

‎src/pages/Bridge/BridgePage.tsx‎

Lines changed: 132 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,149 @@ 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],
70+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'],
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],
76+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer'], // 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],
112+
chainNames: ['eth', 'polygon', 'zkevm', 'manta', 'xlayer', 'doge'],
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+
204+
const [selectedNetwork, setSelectedNetwork] = useState<string>('All');
205+
152206
return (
153207
<Box width={'100%'} mb={2}>
154208
<Box margin='24px auto'>
@@ -281,59 +335,68 @@ const BridgePage: React.FC = ({}) => {
281335
>
282336
Select Bridge
283337
</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> */}
338+
<Select
339+
style={{
340+
backgroundColor: '#282d3d',
341+
borderRadius: '10px',
342+
padding: '6px 16px',
343+
fontSize: '14px',
344+
}}
345+
disableUnderline
346+
value={selectedNetwork}
347+
>
348+
{networkItems.map((item) => (
349+
<MenuItem
350+
key={item.value}
351+
value={item.value}
352+
onClick={() => {
353+
setSelectedNetwork(item.value);
354+
}}
355+
>
356+
{item.label}
357+
</MenuItem>
358+
))}
359+
</Select>
302360
</Box>
303361

304362
<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={
363+
{bridgeData
364+
.filter((item) => {
365+
if (selectedNetwork === 'All') return true;
366+
return item.chainNames.includes(selectedNetwork);
367+
})
368+
.map((item, index) => {
369+
return (
370+
<Grid
371+
key={index}
372+
item
373+
xs={
320374
bridgeData.length % 2 === 1 &&
321375
index === bridgeData.length - 1
322-
? 1 / 2
323-
: 1
376+
? 12
377+
: 6
324378
}
379+
className='flex justify-center'
325380
>
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-
})}
381+
<Box
382+
width={
383+
bridgeData.length % 2 === 1 &&
384+
index === bridgeData.length - 1
385+
? 1 / 2
386+
: 1
387+
}
388+
>
389+
<BridgeBlockItem
390+
onClick={() => {
391+
window.open(item.externalLink, '_blank');
392+
}}
393+
image={item.image}
394+
chains={item.chains}
395+
/>
396+
</Box>
397+
</Grid>
398+
);
399+
})}
337400
</Grid>
338401
</Box>
339402
</Grid>

0 commit comments

Comments
 (0)