Merge pull request QuickSwap#1658 from QuickSwap/soneium_bridge

Add a Bridge page on Soneium

Author: sameepsi

public/bridge/soneium.webp

@@ -260,7 +260,7 @@ const Header: React.FC<{ onUpdateNewsletter: (val: boolean) => void }> = ({
     });
   }
 
-  if (chainId !== ChainId.SONEIUM && isSupportedNetwork)
+  if (isSupportedNetwork)
     menuItems.push({
       link: '/bridge',
       text: t('Bridge'),

public/bridge/soneium_cover_img.webp

@@ -13,6 +13,13 @@
     "symbol": "ETH",
     "decimals": 18
   },
+  "bridgeUrl": "https://superbridge.app/soneium",
+  "bridge": {
+    "bridgeCoverImg": "/bridge/soneium_cover_img.webp",
+    "thirdParty": true,
+    "supportedChains": ["/bridge/eth.svg", "/bridge/soneium.webp"],
+    "isBigCoverImg": true
+  },
   "swap": {
     "available": true,
     "bestTrade": false,
@@ -98,4 +105,4 @@
     "available": false
   },
   "poolInitCodeHash": "0xb3fc09be5eb433d99b1ec89fd8435aaf5ffea75c1879e19028aa2414a14b3c85"
-}
+}

src/assets/images/bridge/across.webp

@@ -27,6 +27,9 @@ import layer from 'assets/images/bridge/layer.svg';
 import squid from 'assets/images/bridge/squid.webp';
 import retr from 'assets/images/bridge/retr.webp';
 import rubic from 'assets/images/bridge/rubic.webp';
+import across from 'assets/images/bridge/across.webp';
+import soneium from 'assets/images/bridge/soneium.webp';
+
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import { useActiveWeb3React } from 'hooks';
 import { getConfig } from 'config';
@@ -42,13 +45,6 @@ const BridgePage: React.FC = ({}) => {
   //   return config && config.visible;
   // });
 
-  useEffect(() => {
-    if (chainId === ChainId.SONEIUM) {
-      history.push('/');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId]);
-
   const currentChain = useMemo(() => {
     return getConfig(chainId);
   }, [chainId]);
@@ -146,6 +142,11 @@ const BridgePage: React.FC = ({}) => {
       isSmallImage: true,
       externalLink: 'https://app.rubic.exchange/',
     },
+    {
+      image: across,
+      chains: [eth, polygon, soneium],
+      externalLink: 'https://app.across.to/bridge',
+    },
   ];
 
   return (
@@ -170,7 +171,9 @@ const BridgePage: React.FC = ({}) => {
                 marginBottom: '16px',
               }}
             >
-              Chain Native Bridge
+              {currentChain?.bridge?.thirdParty
+                ? `${currentChain?.networkName} Official Third Party Bridge `
+                : 'Chain Native Bridge'}
             </Typography>
             <Box
               style={{
@@ -214,7 +217,9 @@ const BridgePage: React.FC = ({}) => {
                   marginBottom: '28px',
                 }}
               >
-                {`${currentChain?.networkName}'s Native Bridge`}
+                {currentChain?.bridge?.thirdParty
+                  ? `${currentChain?.networkName} Official Third Party Bridge`
+                  : `${currentChain?.networkName}'s Native Bridge`}
               </Typography>
               <Box className='flex items-center justify-center'>
                 {currentChain?.bridge?.supportedChains?.map(