feat: Add PCS bridge (#11034)

--- ## PR-Codex overview This PR focuses on enhancing the `canonical-bridge` package by adding new features, updating configurations, and improving the wallet provider and theme settings. It also refines the menu structure and integrates various token configurations for improved functionality. ### Detailed summary - Exported components from `views`, `chains`, and `env`. - Added `breakpoints` configuration. - Defined `locales` with English translations. - Created `BridgeWalletProvider` for wallet connections. - Updated `V1BridgeLink` for external linking. - Enhanced menu structure in `Menu.tsx`. - Improved `tsconfig.json` with stricter settings. - Added new token configurations for multiple chains in JSON files. - Updated environment configurations for API endpoints. - Implemented themes for light and dark modes. - Integrated `useTransferConfig` for managing transfer settings. > The following files were skipped due to too many changes: `packages/canonical-bridge/src/token-config/mainnet/meson/config.json`, `packages/canonical-bridge/src/token-config/mainnet/chains.ts`, `packages/canonical-bridge/src/views/GlobalStyle/index.ts`, `pnpm-lock.yaml`, `packages/canonical-bridge/src/token-config/mainnet/cBridge/config.json` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`  --------- Co-authored-by: Chef Yogi <[email protected]>
pancakeswap · Dec 18, 2024 · 4c9de49 · 4c9de49
1 parent aff6d92
commit 4c9de49
Show file tree

Hide file tree

Showing 32 changed files with 36,898 additions and 1,699 deletions.
diff --git a/apps/bridge/components/Menu.tsx b/apps/bridge/components/Menu.tsx
@@ -28,24 +28,6 @@ const StyledMenuItem = styled('div')<{ $isActive?: boolean }>`
 
 const MenuConfig = [
   { title: 'CAKE', href: '/' },
-  {
-    title: 'EVMs',
-    href: '/axelar',
-    items: [
-      {
-        label: 'Axelar',
-        href: '/axelar',
-      },
-      {
-        label: 'Stargate',
-        href: '/stargate',
-      },
-      {
-        label: 'Wormhole',
-        href: '/wormhole',
-      },
-    ],
-  },
   {
     title: 'Aptos',
     href: '/',
@@ -67,6 +49,10 @@ const MenuConfig = [
       },
     ],
   },
+  {
+    title: 'EVMs',
+    href: '/axelar',
+  },
 ]
 
 export function Menu() {

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -49,6 +49,7 @@
     "@pancakeswap/achievements": "workspace:*",
     "@pancakeswap/blog": "workspace:*",
     "@pancakeswap/chains": "workspace:*",
+    "@pancakeswap/canonical-bridge": "workspace:*",
     "@pancakeswap/farms": "workspace:*",
     "@pancakeswap/gauges": "workspace:*",
     "@pancakeswap/hooks": "workspace:*",

diff --git a/apps/web/src/components/Menu/config/config.ts b/apps/web/src/components/Menu/config/config.ts
@@ -142,37 +142,37 @@ const config: (
     },
     {
       label: t('Bridge'),
-      href: 'https://bridge.pancakeswap.finance',
+      href: '/bridge',
       icon: BridgeIcon,
       type: DropdownMenuItemType.EXTERNAL_LINK,
       image: '/images/decorations/pe2.png',
-      items: [
-        {
-          label: t('Stargate'),
-          href: 'https://bridge.pancakeswap.finance/stargate',
-          type: DropdownMenuItemType.EXTERNAL_LINK,
-        },
-        {
-          label: t('Axelar'),
-          href: 'https://bridge.pancakeswap.finance/axelar',
-          type: DropdownMenuItemType.EXTERNAL_LINK,
-        },
-        {
-          label: t('Celer'),
-          href: 'https://cbridge.celer.network/1/12360001/',
-          type: DropdownMenuItemType.EXTERNAL_LINK,
-        },
-        {
-          label: t('Wormhole'),
-          href: 'https://bridge.pancakeswap.finance/wormhole',
-          type: DropdownMenuItemType.EXTERNAL_LINK,
-        },
-        {
-          label: t('Aptos'),
-          href: 'https://docs.pancakeswap.finance/readme/get-started-aptos/aptos-coin-guide',
-          type: DropdownMenuItemType.EXTERNAL_LINK,
-        },
-      ].map((item) => addMenuItemSupported(item, chainId)),
+      // items: [
+      //   {
+      //     label: t('Stargate'),
+      //     href: 'https://bridge.pancakeswap.finance/stargate',
+      //     type: DropdownMenuItemType.EXTERNAL_LINK,
+      //   },
+      //   {
+      //     label: t('Axelar'),
+      //     href: 'https://bridge.pancakeswap.finance/axelar',
+      //     type: DropdownMenuItemType.EXTERNAL_LINK,
+      //   },
+      //   {
+      //     label: t('Celer'),
+      //     href: 'https://cbridge.celer.network/1/12360001/',
+      //     type: DropdownMenuItemType.EXTERNAL_LINK,
+      //   },
+      //   {
+      //     label: t('Wormhole'),
+      //     href: 'https://bridge.pancakeswap.finance/wormhole',
+      //     type: DropdownMenuItemType.EXTERNAL_LINK,
+      //   },
+      //   {
+      //     label: t('Aptos'),
+      //     href: 'https://docs.pancakeswap.finance/readme/get-started-aptos/aptos-coin-guide',
+      //     type: DropdownMenuItemType.EXTERNAL_LINK,
+      //   },
+      // ].map((item) => addMenuItemSupported(item, chainId)),
     },
     {
       label: t('Play'),

diff --git a/apps/web/src/pages/bridge/index.tsx b/apps/web/src/pages/bridge/index.tsx
@@ -0,0 +1,38 @@
+import { Flex, useMatchBreakpoints } from '@pancakeswap/uikit'
+import ConnectWalletButton from 'components/ConnectWalletButton'
+import { lazy, Suspense } from 'react'
+import { CHAIN_IDS } from 'utils/wagmi'
+import Page from 'views/Page'
+
+const CanonicalBridge = lazy(() =>
+  import('@pancakeswap/canonical-bridge').then((module) => ({ default: module.CanonicalBridge })),
+)
+
+const BridgePage = () => {
+  const { isMobile } = useMatchBreakpoints()
+
+  return (
+    <Page removePadding hideFooterOnDesktop={false} showExternalLink={false} showHelpLink={false} noMinHeight>
+      <Flex
+        width="100%"
+        height="100%"
+        justifyContent="center"
+        position="relative"
+        px={isMobile ? '16px' : '24px'}
+        pb={isMobile ? '14px' : '48px'}
+        pt={isMobile ? '24px' : '64px'}
+        alignItems="flex-start"
+        max-width="unset"
+      >
+        <Suspense>
+          <CanonicalBridge connectWalletButton={<ConnectWalletButton width="100%" />} supportedChainIds={CHAIN_IDS} />
+        </Suspense>
+      </Flex>
+    </Page>
+  )
+}
+
+BridgePage.chains = CHAIN_IDS
+BridgePage.screen = true
+
+export default BridgePage
diff --git a/packages/canonical-bridge/package.json b/packages/canonical-bridge/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@pancakeswap/canonical-bridge",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch --mode development",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "catalog:",
+    "wagmi": "catalog:",
+    "@tanstack/react-query": "^5.52.1",
+    "styled-components": "6.0.7",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@solana/web3.js": "^1",
+    "@solana/spl-token": "^0",
+    "tronweb": "^6",
+    "@solana/wallet-adapter-react": "^0",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1",
+    "@pancakeswap/uikit": "workspace:*",
+    "@pancakeswap/localization": "workspace:*"
+  },
+  "dependencies": {
+    "@bnb-chain/canonical-bridge-widget": "0.5.14-alpha.5",
+    "axios": "~1.6.8",
+    "polished": "^4.2.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.168",
+    "@vitejs/plugin-react": "4.2.1",
+    "vite": "5.0.12",
+    "vite-plugin-dts": "^3.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-transition-group": "^4.4.1",
+    "viem": "catalog:",
+    "wagmi": "catalog:",
+    "@pancakeswap/uikit": "workspace:*",
+    "@pancakeswap/localization": "workspace:*"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  }
+}
diff --git a/packages/canonical-bridge/src/components/RefreshingIcon.tsx b/packages/canonical-bridge/src/components/RefreshingIcon.tsx
@@ -0,0 +1,71 @@
+import { useBridge } from '@bnb-chain/canonical-bridge-widget'
+import { Svg, SvgProps } from '@pancakeswap/uikit'
+import { keyframes, styled } from 'styled-components'
+
+export const RefreshingIcon = (props: SvgProps) => {
+  const { isGlobalFeeLoading, isRefreshing } = useBridge()
+  return (
+    <StyledSVG width="32px" height="32px" viewBox="0 0 20 20" fill="none" {...props}>
+      <circle cx="10.12" cy="10.12" r="9.12" fill="#1FC7D4" fill-opacity="0.2" />
+      <mask
+        id="mask0_1009_72807"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="-3"
+        y="-1"
+        width="24"
+        height="21"
+      >
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M21 -1H-3V20H21V-1ZM11 0H0V11H11V0Z" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1009_72807)">
+        <circle
+          className={!isGlobalFeeLoading && !isRefreshing ? 'refreshBorder' : undefined}
+          cx="10.12"
+          cy="10.12"
+          r="8.12"
+          stroke="#1FC7D4"
+          stroke-width="2"
+          stroke-linecap="round"
+          strokeDasharray={54}
+          strokeDashoffset={54}
+        />
+      </g>
+      <mask
+        id="mask1_1009_72807"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="3"
+        width="13"
+        height="13"
+      >
+        <rect x="4.64795" y="3.9184" width="11.6736" height="11.6736" fill="#48D0DB" />
+      </mask>
+      <g mask="url(#mask1_1009_72807)">
+        <path
+          d="M10.5093 13.6463C9.42301 13.6463 8.49885 13.2693 7.73683 12.5154C6.9748 11.7615 6.59379 10.8414 6.59379 9.75509V9.66997L6.15603 10.1077C6.06685 10.1969 5.95336 10.2415 5.81555 10.2415C5.67774 10.2415 5.56424 10.1969 5.47507 10.1077C5.3859 10.0186 5.34131 9.90506 5.34131 9.76725C5.34131 9.62944 5.3859 9.51594 5.47507 9.42677L6.73971 8.16213C6.83699 8.06485 6.95048 8.01621 7.08019 8.01621C7.20989 8.01621 7.32339 8.06485 7.42067 8.16213L8.68531 9.42677C8.77448 9.51594 8.81907 9.62944 8.81907 9.76725C8.81907 9.90506 8.77448 10.0186 8.68531 10.1077C8.59613 10.1969 8.48264 10.2415 8.34483 10.2415C8.20701 10.2415 8.09352 10.1969 8.00435 10.1077L7.56659 9.66997V9.75509C7.56659 10.5658 7.85235 11.2548 8.42387 11.8223C8.99539 12.3898 9.69053 12.6735 10.5093 12.6735C10.639 12.6735 10.7667 12.6654 10.8923 12.6492C11.018 12.633 11.1416 12.6046 11.2632 12.564C11.401 12.5235 11.5307 12.5276 11.6523 12.5762C11.7739 12.6248 11.8672 12.71 11.932 12.8316C11.9969 12.9613 12.003 13.089 11.9503 13.2146C11.8976 13.3403 11.8023 13.4234 11.6645 13.4639C11.4781 13.5287 11.2875 13.5754 11.093 13.6037C10.8984 13.6321 10.7039 13.6463 10.5093 13.6463ZM10.4607 6.83669C10.331 6.83669 10.2033 6.8448 10.0776 6.86101C9.95197 6.87722 9.82835 6.9056 9.70675 6.94613C9.56893 6.98666 9.4372 6.98261 9.31155 6.93397C9.18589 6.88533 9.09064 6.80021 9.02579 6.67861C8.96093 6.55701 8.95485 6.43338 9.00755 6.30773C9.06024 6.18208 9.15144 6.09898 9.28115 6.05845C9.47571 5.9936 9.67027 5.94496 9.86483 5.91253C10.0594 5.8801 10.258 5.86389 10.4607 5.86389C11.547 5.86389 12.4711 6.24085 13.2331 6.99477C13.9952 7.74869 14.3762 8.6688 14.3762 9.75509V9.84021L14.8139 9.40245C14.9031 9.31328 15.0166 9.26869 15.1544 9.26869C15.2922 9.26869 15.4057 9.31328 15.4949 9.40245C15.5841 9.49162 15.6287 9.60512 15.6287 9.74293C15.6287 9.88074 15.5841 9.99424 15.4949 10.0834L14.2303 11.348C14.133 11.4453 14.0195 11.494 13.8898 11.494C13.7601 11.494 13.6466 11.4453 13.5493 11.348L12.2847 10.0834C12.1955 9.99424 12.1509 9.88074 12.1509 9.74293C12.1509 9.60512 12.1955 9.49162 12.2847 9.40245C12.3738 9.31328 12.4873 9.26869 12.6251 9.26869C12.763 9.26869 12.8765 9.31328 12.9656 9.40245L13.4034 9.84021V9.75509C13.4034 8.94442 13.1176 8.25536 12.5461 7.68789C11.9746 7.12042 11.2794 6.83669 10.4607 6.83669Z"
+          fill="#48D0DB"
+        />
+      </g>
+    </StyledSVG>
+  )
+}
+
+const dash = keyframes`
+  to {
+    stroke-dashoffset: 0;
+  }
+`
+
+const StyledSVG = styled(Svg)`
+  fill: none;
+  color: inherit;
+  .refreshBorder {
+    animation: ${dash} 32s linear forwards infinite;
+  }
+`
diff --git a/packages/canonical-bridge/src/components/V1BridgeLink.tsx b/packages/canonical-bridge/src/components/V1BridgeLink.tsx
@@ -0,0 +1,30 @@
+import { Flex, Link } from '@pancakeswap/uikit'
+import { styled } from 'styled-components'
+import { ExternalLinkIcon } from './icons/ExternalLinkIcon'
+
+export function V1BridgeLink() {
+  return (
+    <Flex marginTop="16px" alignItems="center" justifyContent="center">
+      <StyledLink href="https://bridge.pancakeswap.finance/" target="_blank" rel="noopener">
+        V1 Bridge supports bridging to/from Aptos
+        <ExternalLinkIcon />
+      </StyledLink>
+    </Flex>
+  )
+}
+
+const StyledLink = styled(Link)`
+  display: inline;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 400;
+  color: ${(props: any) => (props.theme.isDark ? '#B8ADD2' : '#7A6EAA')};
+  text-align: center;
+  & > svg {
+    margin-left: 4px;
+    display: inline;
+    vertical-align: middle;
+    color: inherit;
+    fill: none;
+  }
+`
diff --git a/packages/canonical-bridge/src/components/icons/ExternalLinkIcon.tsx b/packages/canonical-bridge/src/components/icons/ExternalLinkIcon.tsx
@@ -0,0 +1,34 @@
+import { Svg, SvgProps } from '@pancakeswap/uikit'
+
+export function ExternalLinkIcon(props: SvgProps) {
+  return (
+    <Svg width="20" height="20" viewBox="0 0 20 20" {...props}>
+      <g clip-path="url(#clip0_1044_1163)">
+        <mask
+          id="mask0_1044_1163"
+          style={{
+            maskType: 'alpha',
+          }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="20"
+          height="20"
+        >
+          <path
+            d="M4.55973 17.1694C4.08084 17.1694 3.67293 17.001 3.33598 16.664C2.99904 16.3271 2.83057 15.9192 2.83057 15.4403V4.55986C2.83057 4.08097 2.99904 3.67305 3.33598 3.33611C3.67293 2.99916 4.08084 2.83069 4.55973 2.83069H9.13536C9.37772 2.83069 9.58244 2.91374 9.74952 3.07986C9.91647 3.24611 9.99994 3.44979 9.99994 3.6909C9.99994 3.93201 9.91647 4.13715 9.74952 4.30631C9.58244 4.47534 9.37772 4.55986 9.13536 4.55986H4.55973V15.4403H15.4401V10.8646C15.4401 10.6223 15.5232 10.4176 15.6893 10.2505C15.8556 10.0835 16.0592 10.0001 16.3004 10.0001C16.5415 10.0001 16.7466 10.0835 16.9158 10.2505C17.0848 10.4176 17.1693 10.6223 17.1693 10.8646V15.4403C17.1693 15.9192 17.0008 16.3271 16.6639 16.664C16.327 17.001 15.919 17.1694 15.4401 17.1694H4.55973ZM15.4401 5.77673L8.81244 12.4044C8.63647 12.5806 8.43793 12.6643 8.21682 12.6557C7.99584 12.6471 7.79737 12.5547 7.6214 12.3786C7.44529 12.2026 7.35723 11.9999 7.35723 11.7703C7.35723 11.5406 7.44529 11.3377 7.6214 11.1617L14.2233 4.55986H12.8645C12.6222 4.55986 12.4174 4.4768 12.2504 4.31069C12.0834 4.14444 11.9999 3.94076 11.9999 3.69965C11.9999 3.45854 12.0834 3.2534 12.2504 3.08423C12.4174 2.9152 12.6222 2.83069 12.8645 2.83069H16.3047C16.5471 2.83069 16.7518 2.91416 16.9189 3.08111C17.0858 3.24819 17.1693 3.45291 17.1693 3.69527V7.13548C17.1693 7.37784 17.0863 7.58256 16.9201 7.74965C16.7539 7.91659 16.5502 8.00006 16.3091 8.00006C16.068 8.00006 15.8629 7.91659 15.6937 7.74965C15.5247 7.58256 15.4401 7.37784 15.4401 7.13548V5.77673Z"
+            fill="#1C1B1F"
+          />
+        </mask>
+        <g mask="url(#mask0_1044_1163)">
+          <rect width="20" height="20" />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_1044_1163">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </Svg>
+  )
+}