diff --git a/apps/bridge/components/Menu.tsx b/apps/bridge/components/Menu.tsx
index d11e6ccf49e31..66c9a208b700a 100644
--- a/apps/bridge/components/Menu.tsx
+++ b/apps/bridge/components/Menu.tsx
@@ -1,34 +1,8 @@
-import { CurrencyAmount, Token } from '@pancakeswap/sdk'
-import {
- BlockIcon,
- Box,
- Button,
- CheckmarkCircleIcon,
- Flex,
- Link,
- Logo,
- Modal,
- OpenNewIcon,
- RefreshIcon,
- Text,
- ThemeSwitcher,
- useModal,
- UserMenu,
- UserMenuDivider,
- UserMenuItem,
- DropdownMenuItemType,
- DropdownMenu,
- useMatchBreakpoints,
-} from '@pancakeswap/uikit'
+import { Box, Flex, Logo, ThemeSwitcher, DropdownMenuItemType, DropdownMenu } from '@pancakeswap/uikit'
import { useRouter } from 'next/router'
import { useTheme as useNextTheme } from 'next-themes'
-import Image from 'next/image'
import NextLink from 'next/link'
-import { useEffect, useReducer, useRef, useState } from 'react'
import styled, { useTheme } from 'styled-components'
-import getTimePeriods from '@pancakeswap/utils/getTimePeriods'
-import { CHAINS_STARGATE } from './stargate/config'
-import { findChainByStargateId } from './stargate/network'
const StyledMenuItem = styled('div')<{ $isActive?: boolean }>`
position: relative;
@@ -52,31 +26,6 @@ const StyledMenuItem = styled('div')<{ $isActive?: boolean }>`
}
`
-const TxnIcon = styled(Flex)`
- align-items: center;
- flex: none;
- width: 24px;
-`
-
-const Summary = styled(Flex)`
- flex: 1;
- align-items: center;
- padding: 0 8px;
- gap: 4px;
-`
-
-const TxnLink = styled(Link)`
- align-items: center;
- color: ${({ theme }) => theme.colors.text};
- display: flex;
- margin-bottom: 16px;
- width: 100%;
-
- &:hover {
- text-decoration: none;
- }
-`
-
const MenuConfig = [
{ title: 'CAKE', href: '/' },
{
@@ -95,12 +44,8 @@ const MenuConfig = [
},
{
title: 'Aptos',
- href: '/aptos',
+ href: '/',
items: [
- {
- label: 'Pancake Bridge',
- href: '/aptos',
- },
{
label: 'LayerZero',
href: 'https://theaptosbridge.com/bridge',
@@ -161,303 +106,7 @@ export function Menu() {
setTheme(theme.isDark ? 'light' : 'dark')} />
- {nextRouter.pathname === '/stargate' && }
)
}
-
-const UserMenuItems = ({ onShowTx }: { onShowTx: () => void }) => {
- return (
- <>
-
- Recent Transactions
-
-
-
- Select a Network
-
-
- {CHAINS_STARGATE.map((chain) => (
- switchNetwork(chain.id)}>
-
- {chain.name}
-
- ))}
-
- window?.stargate.wallet.disconnect()}>
- Disconnect
-
- >
- )
-}
-
-async function switchNetwork(chainId: number) {
- const chain = CHAINS_STARGATE.find((c) => c.id === chainId)
- const provider = window?.stargate?.wallet?.ethereum?.signer?.provider?.provider ?? (window as any)?.ethereum
- if (chain && provider) {
- try {
- await provider.request({
- method: 'wallet_switchEthereumChain',
- params: [{ chainId: `0x${chainId.toString(16)}` }],
- })
- return true
- } catch (switchError) {
- if ((switchError as any)?.code === 4902) {
- try {
- await provider.request({
- method: 'wallet_addEthereumChain',
- params: [
- {
- chainId: chain.id,
- chainName: chain.name,
- nativeCurrency: chain.nativeCurrency,
- rpcUrls: chain.rpcUrls.default,
- blockExplorerUrls: chain.blockExplorers?.default,
- },
- ],
- })
- return true
- } catch (error) {
- console.error('Failed to setup the network', error)
- return false
- }
- }
- return false
- }
- }
- return false
-}
-
-function useStargateReaction(expression: () => T) {
- const savedExpression = useRef(expression)
- const [value, setValue] = useState()
-
- useEffect(() => {
- savedExpression.current = expression
- }, [expression])
-
- useEffect(() => {
- customElements.whenDefined('stargate-widget').then(() => {
- setValue(savedExpression.current)
- window?.stargate?.utils?.reaction(savedExpression.current, (v: T) => {
- setValue(v)
- })
- })
- }, [])
-
- return value
-}
-
-const renderIcon = (txn: TransactionType) => {
- if (!txn.completed) {
- return
- }
-
- if (txn.error) {
- return
- }
-
- return
-}
-
-function RecentTransactionsModal({
- onDismiss,
- transactions,
-}: {
- onDismiss?: () => void
- transactions: TransactionType[]
-}) {
- return (
-
-
-
-
- {transactions?.map((txn, i) => {
- const txnChain = findChainByStargateId(txn.chainId)
- return (
-
- {renderIcon(txn)}
-
- {txn.type === 'APPROVE' && (
- <>
- {`Approve ${txn?.input?.amount?.currency?.symbol ?? ''}`}{' '}
-
- >
- )}
- {txn.type === 'TRANSFER' && (
- <>
- Transfer {txn.input.amount.toSignificant(2)} {txn.input.from.token.symbol}
-
- to {txn.input.to.token.symbol}{' '}
-
- >
- )}
-
-
- {txn.type === 'TRANSFER' && !txn.completed && txn.expected && }
-
-
-
-
-
- )
- })}
-
- )
-}
-
-function CountDown({ expected }: { expected: string }) {
- const secondLeft = (Date.now() - new Date(expected).getTime()) / 1000
- const { hours, minutes, seconds } = getTimePeriods(secondLeft)
- const [, forceUpdate] = useReducer((s) => s + 1, 0)
-
- useEffect(() => {
- setInterval(() => forceUpdate(), 1000)
- }, [])
-
- if (secondLeft > 0) {
- return null
- }
-
- return (
-
- {hours ? `${hours} h` : null} {hours || minutes ? `${minutes} m` : null} {`${parseInt(String(seconds))} s`}
-
- )
-}
-
-type BaseTxnType = {
- chainId: number
- progress: number
- completed: boolean
- hash: string
- expected: string // date
- exceeded: boolean
- submitted: string // date
- confirmations: number
- confirmation?: {
- hash: string
- chainId: number
- }
- error?: any // ??
-}
-
-type TransactionApprove = {
- type: 'APPROVE'
- input: {
- amount: CurrencyAmount
- spender: string
- account: string
- }
-} & BaseTxnType
-
-type TransactionTransfer = {
- type: 'TRANSFER'
- input: TransferInput
-} & BaseTxnType
-
-type TransactionType = TransactionApprove | TransactionTransfer
-
-type TransferInput = {
- from: {
- account: string
- chainId: number
- token: Token
- }
- to: {
- account: string
- chainId: number
- token: Token
- }
- amount: CurrencyAmount
- minAmount: CurrencyAmount
- nativeFee: CurrencyAmount
- dstNativeAmount: CurrencyAmount
-}
-
-function User() {
- const { isMobile } = useMatchBreakpoints()
- const wallet = useStargateReaction(() => window.stargate.wallet.ethereum)
- const [pending, setPending] = useState([])
- const transactions = useStargateReaction(() => window.stargate.transaction.transactions)
- const [showRecentTxModal] = useModal(, true, true, 'recent-tx')
-
- useEffect(() => {
- customElements.whenDefined('stargate-widget').then(() => {
- setInterval(() => {
- setPending(window.stargate.transaction.pickPendingTransactions())
- }, 1000)
- })
- }, [])
-
- const { account, chainId } = wallet || {}
-
- const chain = findChainByStargateId(chainId)
-
- const isWrongNetwork = chainId && !chain
- const hasPendingTransactions = pending.length > 0
-
- if (isMobile && !account) {
- return null
- }
-
- if (isWrongNetwork) {
- return (
-
- {() => showRecentTxModal()} />}
-
- )
- }
-
- if (account) {
- return (
-
- {() => showRecentTxModal()} />}
-
- )
- }
-
- return (
-
- )
-}
diff --git a/apps/bridge/components/layerZero/LayerZeroWidget.tsx b/apps/bridge/components/layerZero/LayerZeroWidget.tsx
index aaf7c2586b767..ccd0b28c7bbd4 100644
--- a/apps/bridge/components/layerZero/LayerZeroWidget.tsx
+++ b/apps/bridge/components/layerZero/LayerZeroWidget.tsx
@@ -1,10 +1,9 @@
import { useEffect } from 'react'
import { Box, PancakeTheme } from '@pancakeswap/uikit'
-import { darkTheme, lightTheme } from 'components/layerZero/theme'
declare global {
interface Window {
- aptosBridge?: any
+ app?: any
}
interface Document {
querySelector?: any
@@ -14,79 +13,33 @@ declare global {
export const LayerZeroWidget = ({ theme }: { theme: PancakeTheme }) => {
useEffect(() => {
const themeText = theme.isDark ? 'dark' : 'light'
- const themeColor = theme.isDark ? darkTheme : lightTheme
- if (window.aptosBridge) {
+ const fetch = async () => {
+ const app: any = await customElements.whenDefined('lz-bridge')
document.body.classList.add(themeText)
- document.querySelector('aptos-bridge').setTheme(themeColor)
+ const themeColor = theme.isDark ? app?.uiStore?.theme?.config?.dark : app?.uiStore?.theme?.config?.light
+ app?.uiStore?.theme?.setTheme?.(themeColor)
}
- return () => {
- document.body.classList.remove(themeText)
- }
+ fetch()
}, [theme])
return (
{/* @ts-ignore */}
-
+
+ {/* @ts-ignore */}
+
)
}
diff --git a/apps/bridge/components/layerZero/config.ts b/apps/bridge/components/layerZero/config.ts
index 1cbbaac14fbb4..53b32ca34df2b 100644
--- a/apps/bridge/components/layerZero/config.ts
+++ b/apps/bridge/components/layerZero/config.ts
@@ -1,7 +1,13 @@
-const VERSION = '0.0.0-alpha.27-mainnet.10'
-const SHA384 = 'EoecksQ6B3PYYmi2Qmtx0m0cfnIijDdc3XGCHbRkzO8ekpvHdITE3fNxTEVmUCTW'
+const VERSION = '0.0.19'
+// https://unpkg.com/@layerzerolabs/x-pancakeswap-widget@0.0.19/element.mjs.sha384
+const SHA384 = 'vFsGllKrtj0a3Zmmbv9/oOUXwg5KRwOmB2Cxd82TA+iVK1rzBkC4RjQcg/tBjUrK'
export const LAYER_ZERO_JS = {
- src: `https://unpkg.com/@layerzerolabs/aptos-bridge-widget@${VERSION}/element.js`,
+ src: `https://unpkg.com/@layerzerolabs/x-pancakeswap-widget@${VERSION}/element.mjs`,
+ css: `https://unpkg.com/@layerzerolabs/x-pancakeswap-widget@${VERSION}/element.css`,
integrity: `sha384-${SHA384}`,
}
+
+export const PARTNER_ID = 0x0002
+export const FEE_COLLECTOR = '0x68C7ABB8b1c3D1cE467E28265770F3a7ECF32654'
+export const FEE_TENTH_BPS = '0'
diff --git a/apps/bridge/components/layerZero/index.tsx b/apps/bridge/components/layerZero/index.tsx
new file mode 100644
index 0000000000000..294412675cef7
--- /dev/null
+++ b/apps/bridge/components/layerZero/index.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react'
+import Script from 'next/script'
+import styled, { useTheme } from 'styled-components'
+import { Flex, Box } from '@pancakeswap/uikit'
+import { LAYER_ZERO_JS, FEE_COLLECTOR, FEE_TENTH_BPS, PARTNER_ID } from 'components/layerZero/config'
+import { LayerZeroWidget } from 'components/layerZero/LayerZeroWidget'
+import AptosBridgeFooter from 'components/layerZero/AptosBridgeFooter'
+import { PancakeSwapTheme } from './theme'
+
+declare global {
+ interface Window {
+ app?: any
+ }
+}
+
+const Page = styled(Box)`
+ display: flex;
+ height: 100%;
+ height: calc(100vh - 56px);
+ background: ${({ theme }) => theme.colors.backgroundAlt};
+
+ ${({ theme }) => theme.mediaQueries.sm} {
+ min-height: 1000px;
+ background: ${({ theme }) => theme.colors.gradientBubblegum};
+ }
+`
+
+const LayerZero = ({ isCake }: { isCake?: boolean }) => {
+ const theme = useTheme()
+ const [show, setShow] = useState(false)
+
+ useEffect(() => {
+ customElements.whenDefined('lz-bridge').then((Bridge: any) => {
+ const { createBasicTheme, bootstrap, uiStore } = Bridge
+
+ if (!Bridge.initialized) {
+ bootstrap({
+ stargate: {
+ partner: {
+ partnerId: PARTNER_ID,
+ feeCollector: FEE_COLLECTOR,
+ feeBps: FEE_TENTH_BPS,
+ },
+ },
+ })
+
+ const newTheme = {
+ dark: createBasicTheme(PancakeSwapTheme.dark),
+ light: createBasicTheme(PancakeSwapTheme.light),
+ }
+ uiStore.theme.setConfig(newTheme)
+ }
+
+ if (isCake) {
+ setTimeout(async () => {
+ const app: any = await customElements.whenDefined('lz-bridge')
+ const length = app?.bridgeStore?.currencies?.length
+ if (length !== null || length !== undefined) {
+ const currencies = app?.bridgeStore?.currencies?.slice()
+ // @ts-ignore
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ app!.bridgeStore!.currencies.length = 0
+ app?.bridgeStore?.addCurrencies(currencies?.filter((i) => i.symbol.toLowerCase() === 'cake'))
+
+ const srcCake = app?.bridgeStore?.currencies?.find(
+ (i) => i.symbol.toUpperCase() === 'CAKE' && i.chainId === 102,
+ )
+ app?.bridgeStore?.setSrcCurrency(srcCake)
+ }
+ }, 800)
+ }
+
+ setShow(true)
+ })
+ }, [isCake])
+
+ return (
+
+
+
+ {show && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
+
+export default LayerZero
diff --git a/apps/bridge/components/layerZero/theme.ts b/apps/bridge/components/layerZero/theme.ts
index c8bde31e3e32b..69bdb92268781 100644
--- a/apps/bridge/components/layerZero/theme.ts
+++ b/apps/bridge/components/layerZero/theme.ts
@@ -1,98 +1,116 @@
-import { darkColors, lightColors } from '@pancakeswap/ui/tokens/colors'
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
-
-export const breakpoints = createBreakpoints({
- keys: ['xs', 'sm', 'md', 'lg', 'xl'],
- values: {
- xs: 0,
- sm: 600,
- md: 960,
- lg: 1280,
- xl: 1920,
+const defaultTypography = {
+ fontFamily: '"Roboto Mono", monospace',
+ h1: {
+ fontSize: 28,
+ lineHeight: '36px',
+ fontWeight: 500,
},
- unit: 'px',
-})
-
-export const darkTheme = {
- breakpoints,
- palette: {
- mode: 'dark',
- primary: {
- main: darkColors.primary,
- contrastText: darkColors.invertedContrast,
- },
- secondary: {
- main: darkColors.input,
- contrastText: darkColors.contrast,
- },
- info: {
- main: darkColors.primary,
- light: darkColors.invertedContrast,
- },
- success: {
- main: darkColors.success,
- },
- error: {
- main: darkColors.failure,
- },
- warning: {
- main: darkColors.warning,
- },
- text: {
- primary: darkColors.text,
- secondary: darkColors.textSubtle,
- },
- divider: darkColors.cardBorder,
- background: {
- default: '#27262c',
- },
+ h2: {
+ fontSize: 24,
+ lineHeight: '28px',
+ fontWeight: 500,
+ },
+ h3: {
+ fontSize: 20,
+ lineHeight: '24px',
+ fontWeight: 500,
+ },
+ p1: {
+ fontSize: 16,
+ lineHeight: '24px',
+ fontWeight: 400,
+ },
+ p2: {
+ fontSize: 14,
+ lineHeight: '20px',
+ letterSpacing: '-0.02em',
+ fontWeight: 400,
},
- shape: {
- borderRadius: 18,
+ p3: {
+ fontSize: 12,
+ lineHeight: '16px',
+ fontWeight: 400,
},
- typography: {
- fontFamily: "'Kanit', sans-serif",
+ caption: {
+ fontSize: 10,
+ lineHeight: '16px',
+ fontWeight: 400,
+ },
+ link: {
+ cursor: 'pointer',
+ '&:hover': {
+ opacity: 0.7,
+ },
},
}
-export const lightTheme = {
- breakpoints,
- palette: {
- mode: 'light',
- primary: {
- main: lightColors.primary,
- contrastText: lightColors.invertedContrast,
- },
- secondary: {
- main: lightColors.input,
- contrastText: lightColors.contrast,
- },
- info: {
- main: lightColors.primary,
- light: lightColors.invertedContrast,
- },
- success: {
- main: lightColors.success,
- },
- error: {
- main: lightColors.failure,
- },
- warning: {
- main: lightColors.warning,
- },
- text: {
- primary: lightColors.text,
- secondary: lightColors.textSubtle,
- },
- divider: lightColors.cardBorder,
- background: {
- default: lightColors.backgroundAlt,
+const borderRadius = 18
+
+export const PancakeSwapTheme = {
+ dark: {
+ typography: {
+ ...defaultTypography,
+ fontFamily: "'Kanit', sans-serif",
+ },
+ shape: { borderRadius },
+ palette: {
+ mode: 'dark',
+ primary: {
+ main: '#1EC7D3',
+ contrastText: '#191326',
+ light: '#1EC7D3',
+ },
+ secondary: {
+ main: '#372F47',
+ contrastText: '#F4EEFF',
+ light: '#372F47',
+ },
+ info: { main: '#1EC7D3' },
+ success: { main: '#8AE06C' },
+ error: { main: '#F56868' },
+ warning: { main: '#F1DF38' },
+ text: {
+ primary: '#F4EEFF',
+ secondary: '#B8ADD2',
+ },
+ divider: '#383241',
+ background: {
+ paper: '#27262D',
+ default: '#27262D',
+ },
},
},
- shape: {
- borderRadius: 18,
- },
- typography: {
- fontFamily: "'Kanit', sans-serif",
+ light: {
+ typography: {
+ ...defaultTypography,
+ fontFamily: "'Kanit', sans-serif",
+ },
+ shape: { borderRadius },
+ palette: {
+ mode: 'light',
+ primary: {
+ main: '#1EC7D3',
+ contrastText: '#FFFFFF',
+ light: '#1EC7D3',
+ },
+ secondary: {
+ main: '#EEEAF4',
+ contrastText: '#280D5F',
+ light: '#EEEAF4d',
+ },
+ info: { main: '#1EC7D3' },
+ success: { main: '#8AE06C' },
+ error: { main: '#F56868' },
+ warning: { main: '#F1DF38' },
+ text: {
+ primary: '#280D5F',
+ secondary: '#7C70AB',
+ },
+ divider: '#E7E3EB',
+ background: {
+ paper: '#FFFFFF',
+ default: '#FFFFFF',
+ },
+ },
},
}
diff --git a/apps/bridge/components/stargate/config.ts b/apps/bridge/components/stargate/config.ts
deleted file mode 100644
index 4d082462d0805..0000000000000
--- a/apps/bridge/components/stargate/config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { arbitrum, mainnet, optimism, polygon, avalanche, fantom } from 'viem/chains'
-
-const VERSION = '0.0.27'
-const SHA384 = 'ZWUQEUGzdCAFC3Dch9zkGZQawEKOjOytxBQfPjasDDgGCWyR+njzQ9rOW8a/F8LK'
-export const PARTNER_ID = 0x0002
-export const FEE_COLLECTOR = '0x68C7ABB8b1c3D1cE467E28265770F3a7ECF32654'
-export const FEE_TENTH_BPS = '0'
-
-export const STARGATE_JS = {
- src: `https://unpkg.com/@layerzerolabs/stargate-ui@${VERSION}/element.js`,
- integrity: `sha384-${SHA384}`,
-}
-
-export const CHAINS_STARGATE = [mainnet, arbitrum, optimism, polygon, avalanche, fantom]
diff --git a/apps/bridge/components/stargate/index.tsx b/apps/bridge/components/stargate/index.tsx
deleted file mode 100644
index 50bcc09a42f87..0000000000000
--- a/apps/bridge/components/stargate/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Box, PancakeTheme } from '@pancakeswap/uikit'
-import { useMemo } from 'react'
-import type {} from 'styled-jsx'
-import { FEE_COLLECTOR, FEE_TENTH_BPS, PARTNER_ID } from './config'
-import { darkTheme, lightTheme, FontFamily } from './theme'
-
-const stringDarkTheme = JSON.stringify(darkTheme)
-const stringLightTheme = JSON.stringify(lightTheme)
-
-export const StargateWidget = ({ theme }: { theme: PancakeTheme }) => {
- const widgetTheme = useMemo(() => {
- return theme.isDark ? stringDarkTheme : stringLightTheme
- }, [theme])
-
- return (
-
-
- {/* @ts-ignore */}
-
-
- )
-}
diff --git a/apps/bridge/components/stargate/network.ts b/apps/bridge/components/stargate/network.ts
deleted file mode 100644
index af7f6aea2c0f5..0000000000000
--- a/apps/bridge/components/stargate/network.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { mainnet, arbitrum, optimism, polygon, fantom, avalanche, bsc } from 'viem/chains'
-
-// Chain Id is defined by Stargate
-const stargateNetowrk = [
- {
- chainId: 101,
- name: 'Ethereum',
- chain: mainnet,
- },
- {
- name: 'BNB Chain',
- chainId: 102,
- chain: bsc,
- },
- {
- chainId: 109,
- name: 'Matic',
- chain: polygon,
- },
- {
- chainId: 106,
- name: 'Avalanche',
- chain: avalanche,
- },
- {
- chainId: 112,
- name: 'Fantom',
- chain: fantom,
- },
- {
- chainId: 110,
- name: 'Arbitrum',
- chain: arbitrum,
- },
- {
- chainId: 111,
- name: 'Optimism',
- chain: optimism,
- },
-]
-
-export const findChainByStargateId = (chainId: number) => stargateNetowrk.find((s) => s.chainId === chainId)
diff --git a/apps/bridge/components/stargate/theme.ts b/apps/bridge/components/stargate/theme.ts
deleted file mode 100644
index f386aa7b4cb72..0000000000000
--- a/apps/bridge/components/stargate/theme.ts
+++ /dev/null
@@ -1,1124 +0,0 @@
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
-import { alpha } from '@material-ui/core/styles/colorManipulator'
-import createTypography from '@material-ui/core/styles/createTypography'
-import createPalette from '@material-ui/core/styles/createPalette'
-import type { Theme } from '@material-ui/core/styles'
-import { darkColors, lightColors } from '@pancakeswap/ui/tokens/colors'
-
-// utils
-const fontSize = 14
-const htmlFontSize = 16
-const coef = fontSize / 14
-
-function pxToRem(size: number) {
- return `${(size / htmlFontSize) * coef}rem`
-}
-
-function pointsToRem(size: number) {
- return `${size / 1000}rem`
-}
-
-// theme definition
-
-export const FontFamily = {
- KANIT: "'Kanit', sans-serif",
-}
-
-const FontWeight = {
- THIN: 100,
- EXTRA_LIGHT: 200,
- LIGHT: 300,
- REGULAR: 400,
- MEDIUM: 500,
- SEMI_BOLD: 600,
- BOLD: 700,
- EXTRA_BOLD: 800,
- BLACK: 900,
-}
-
-const darkPalette = createPalette({
- type: 'dark',
- primary: {
- light: '#BFBFBF',
- main: darkColors.primary,
- dark: '#EFEFEF',
- contrastText: darkColors.invertedContrast,
- },
- info: {
- main: darkColors.primary,
- light: darkColors.invertedContrast,
- },
- success: {
- main: darkColors.success,
- },
- error: {
- main: darkColors.failure,
- },
- warning: {
- main: darkColors.warning,
- },
- // @ts-ignore
- borders: {
- disabled: '#494747',
- default: '#9A9A9A',
- },
- text: {
- primary: darkColors.text,
- secondary: darkColors.textSubtle,
- disabled: darkColors.textDisabled,
- },
- divider: darkColors.cardBorder,
- background: {
- paper: darkColors.backgroundAlt,
- default: darkColors.primary,
- },
- action: {
- disabled: darkColors.textDisabled,
- disabledBackground: darkColors.disabled,
- },
-})
-
-const lightPalette = createPalette({
- type: 'dark',
- primary: {
- light: '#BFBFBF',
- main: lightColors.primary,
- dark: '#EFEFEF',
- contrastText: lightColors.invertedContrast,
- },
- info: {
- main: lightColors.primary,
- light: lightColors.invertedContrast,
- },
- success: {
- main: lightColors.success,
- },
- error: {
- main: lightColors.failure,
- },
- warning: {
- main: lightColors.warning,
- },
- // @ts-ignore
- borders: {
- disabled: '#494747',
- default: '#9A9A9A',
- },
- text: {
- primary: lightColors.text,
- secondary: lightColors.textSubtle,
- disabled: lightColors.textDisabled,
- },
- divider: lightColors.cardBorder,
- background: {
- paper: lightColors.backgroundAlt,
- default: lightColors.primary,
- },
- action: {
- disabled: lightColors.textDisabled,
- disabledBackground: lightColors.disabled,
- },
-})
-
-const breakpoints = createBreakpoints({
- values: {
- xs: 0,
- sm: 600,
- md: 960,
- lg: 1280,
- xl: 1920,
- },
-})
-
-const typography = createTypography(darkPalette, {
- fontFamily: FontFamily.KANIT,
- h1: {
- lineHeight: pxToRem(46),
- letterSpacing: '-3%',
- fontSize: pxToRem(46),
- fontWeight: FontWeight.MEDIUM,
- },
- h2: {
- lineHeight: pxToRem(36),
- fontSize: pxToRem(36),
- letterSpacing: '-2%',
- fontWeight: FontWeight.MEDIUM,
- },
- h3: {
- lineHeight: pxToRem(25),
- fontSize: pxToRem(24),
- letterSpacing: '-2%',
- fontWeight: FontWeight.MEDIUM,
- },
- h4: {
- lineHeight: pxToRem(24),
- fontSize: pxToRem(20),
- letterSpacing: '0%',
- fontWeight: FontWeight.MEDIUM,
- },
- h5: {
- lineHeight: pxToRem(24),
- letterSpacing: pxToRem(0.18),
- },
- h6: {
- lineHeight: pxToRem(24),
- letterSpacing: pxToRem(0.15),
- },
- subtitle1: {
- lineHeight: pxToRem(24),
- letterSpacing: pxToRem(0.14),
- },
- subtitle2: {
- lineHeight: pxToRem(24),
- letterSpacing: pxToRem(0.1),
- },
- body1: {
- lineHeight: pxToRem(24),
- letterSpacing: pxToRem(0.5),
- },
- body2: {
- lineHeight: pxToRem(20),
- letterSpacing: pxToRem(0.25),
- },
- button: {
- lineHeight: pxToRem(16),
- letterSpacing: pxToRem(1.25),
- },
- caption: {
- lineHeight: pxToRem(16),
- letterSpacing: pxToRem(0.24),
- },
- overline: {
- fontSize: pxToRem(10),
- lineHeight: pxToRem(16),
- letterSpacing: pxToRem(1.5),
- },
-})
-
-export const darkTheme: Theme = {
- palette: darkPalette,
- typography,
- breakpoints,
- props: {
- MuiTextField: {
- InputLabelProps: {
- shrink: true,
- },
- },
- // @ts-ignore
- MuiAlert: {
- icon: false,
- },
- },
- shape: {
- borderRadius: 18,
- },
- overrides: {
- MuiPaper: {
- root: {
- borderRadius: 32,
- },
- },
- MuiSlider: {
- root: {
- color: '#50BEAF',
- },
- rail: {
- color: '#D9D9D9',
- },
- mark: {
- color: '#D9D9D9',
- },
- },
- MuiTypography: {
- button: {
- textTransform: 'none',
- },
- },
- MuiTable: {
- root: {
- backgroundColor: darkPalette.background.paper,
- },
- },
- MuiSwitch: {
- root: {
- '&.MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track': {
- backgroundColor: '#323232',
- },
- },
- switchBase: {
- background: 'none',
- '&:hover, .checked:hover': {
- background: 'none',
- },
- },
- colorSecondary: {
- '&.Mui-checked + .MuiSwitch-track': {
- opacity: 1,
- backgroundColor: '#FFFFFF',
- },
- '&.MuiSwitch-colorSecondary.Mui-checked': {
- '&:hover': {
- background: 'none',
- },
- },
- },
- thumb: {
- backgroundColor: '#999999',
- },
- },
- MuiTableCell: {
- root: {
- height: pxToRem(76),
- padding: `${pxToRem(16)} ${pxToRem(32)}`,
- fontWeight: 400,
- fontSize: pxToRem(16),
- lineHeight: pxToRem(18.75),
- '&.MuiTableCell-head': {
- color: `${darkPalette.text.secondary} !important`,
- fontSize: pxToRem(16),
- fontWeight: 400,
- lineHeight: pxToRem(18.75),
- height: pxToRem(69),
- },
- },
- },
- MuiTableRow: {
- root: {
- borderBottom: `${pxToRem(1.016)} solid ${darkPalette.divider}`,
- cursor: 'pointer',
- transition: 'background-color 0.2s ease-in-out',
- '&:hover': {
- backgroundColor: darkPalette.divider,
- },
- },
- head: {
- '&:hover': {
- backgroundColor: darkPalette.background.paper,
- },
- },
- },
- MuiIconButton: {
- root: {
- '&:hover': {
- backgroundColor: 'transparent !important',
- },
- },
- },
- MuiButton: {
- root: {
- borderRadius: 16,
- fontFamily: FontFamily.KANIT,
- fontWeight: FontWeight.MEDIUM,
- letterSpacing: '0.04em',
- textTransform: 'none',
- },
- sizeSmall: {
- borderRadius: 8,
- fontSize: pxToRem(14),
- letterSpacing: 0,
- },
- sizeLarge: {
- borderRadius: 16,
- fontSize: pxToRem(16),
- letterSpacing: 0,
- fontWeight: 500,
- },
- contained: {
- padding: `13px 16px 11px 16px`,
- fontSize: pxToRem(14),
- boxShadow: 'none',
- '&$disabled, &$disabled:hover': {
- color: darkColors.textDisabled,
- backgroundColor: darkColors.backgroundDisabled,
- },
- '&:hover': {
- boxShadow: 'none',
- },
- },
- containedPrimary: {
- color: '#191326',
- '& [class^=MuiButton-label]': {
- position: 'relative',
- width: 'initial',
- '&::after': {
- content: '""',
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: '1.5px',
- width: '100%',
- backgroundColor: 'transparent',
- transform: 'scaleX(0)',
- transition: 'transform 150ms ease-out',
- transformOrigin: 'left',
- },
- },
- '&:hover': {
- backgroundColor: darkPalette.primary.main,
- opacity: 0.65,
- boxShadow: 'none',
- },
- },
- containedSizeSmall: {
- padding: `6px 12px 4px 12px`,
- },
- containedSizeLarge: {
- padding: `20px 24px`,
- },
- outlined: {
- backgroundColor: 'transparent',
- color: darkPalette.primary.main,
- padding: `11px 15px 9px 15px`,
- fontSize: pxToRem(14),
- letterSpacing: pointsToRem(89),
- boxShadow: 'none',
- '&$disabled, &$disabled:hover': {
- color: '#666666',
- borderColor: '#404040!important',
- },
- '&:hover': {
- boxShadow: 'none',
- backgroundColor: 'transparent',
- },
- },
- outlinedPrimary: {
- border: `1px solid ${darkPalette.primary.main}`,
- '&:hover': {
- border: `1px solid ${darkPalette.primary.main}`,
- '& [class^=MuiButton-label]::after': {
- transform: 'scaleX(1)',
- },
- },
- '&$disabled': {
- border: `1px solid ${darkPalette.action.disabled}`,
- },
- '&$outlinedSizeSmall': {
- border: `1px solid ${darkPalette.primary.main}`,
- },
- '& [class^=MuiButton-label]': {
- position: 'relative',
- width: 'initial',
- '&::after': {
- content: '""',
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: '1.5px',
- width: '100%',
- backgroundColor: 'transparent',
- transform: 'scaleX(0)',
- transition: 'transform 150ms ease-out',
- transformOrigin: 'left',
- },
- },
- },
- outlinedSizeSmall: {
- padding: `5px 11px 3px 11px`,
- },
- outlinedSizeLarge: {
- padding: `18px 23px`,
- },
- },
- MuiInputBase: {
- formControl: {
- backgroundColor: darkColors.input,
- borderColor: darkPalette.divider,
- '&:hover': {
- backgroundColor: darkColors.input,
- },
- 'label + &': {
- marginTop: 24,
- },
- 'label.MuiFormLabel-filled + &:not($focused):not($error)': {
- backgroundColor: darkColors.input,
- },
- },
- root: {
- '& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
- display: 'none',
- },
- },
- },
- MuiOutlinedInput: {
- root: {
- borderRadius: 18,
- height: 56,
- backgroundColor: darkColors.input,
- color: darkColors.text,
- transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)',
- borderColor: darkColors.input,
- '&$focused:not($error) $notchedOutline': {
- borderWidth: 1,
- borderColor: darkColors.input,
- },
- '&$notchedOutline': {
- borderColor: darkColors.input,
- },
- '&$error $notchedOutline': {
- borderWidth: 1,
- borderColor: darkPalette.error.main,
- },
- '&$disabled': {
- backgroundColor: darkPalette.action.disabledBackground,
- color: '#666666',
- '& $notchedOutline': {
- borderWidth: 0,
- },
- },
- '&$focused': {
- backgroundColor: darkColors.input,
- borderColor: darkColors.input,
- },
- '&:hover $notchedOutline': {
- borderColor: darkColors.input,
- },
- 'label.MuiFormLabel-filled + &:not($focused):not($error) $notchedOutline': {
- borderColor: darkColors.input,
- },
- },
- focused: {},
- disabled: {},
- error: {},
- input: {
- fontSize: pxToRem(16),
- padding: `${(56 - 24) / 2}px 16px`,
- },
- notchedOutline: {
- transition: 'border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)',
- borderColor: '#333333',
- borderTopColor: '#333333',
- borderBottomColor: '#333333',
- borderLeftColor: '#333333',
- borderRightColor: '#333333',
- top: 0,
- '& > legend': {
- display: 'none',
- },
- },
- },
- MuiInputAdornment: {
- root: {
- color: '#757575',
- },
- },
- MuiInputLabel: {
- outlined: {
- '&$shrink': {
- transform: 'translateY(3px) scale(0.9)',
- fontSize: pxToRem(14),
- lineHeight: pxToRem(20),
- letterSpacing: 0.25,
- },
- '&$disabled': {
- color: darkPalette.action.disabled,
- },
- },
- shrink: {},
- disabled: {},
- },
- MuiFormHelperText: {
- contained: {
- marginLeft: 0,
- marginRight: 0,
- },
- },
- MuiFormLabel: {
- root: {
- color: darkPalette.text.secondary,
- },
- },
- MuiChip: {
- root: {
- backgroundColor: darkPalette.action.disabledBackground,
- color: darkPalette.action.disabled,
- cursor: 'pointer',
- width: 85,
- height: 28,
- },
- },
- MuiTooltip: {
- tooltip: {
- borderRadius: 4,
- color: darkPalette.primary.contrastText,
- backgroundColor: darkPalette.primary.light,
- maxWidth: 140,
- },
- arrow: {
- color: darkPalette.primary.light,
- },
- },
- MuiAccordionSummary: {
- root: {
- margin: 0,
- [breakpoints.up('md')]: {
- padding: '0 24px',
- },
- '&$expanded': {
- minHeight: 56,
- },
- },
- content: {
- margin: '12px 0',
-
- '&$expanded': {
- margin: '12px 0',
- },
- [breakpoints.up('md')]: {
- margin: '16px 0',
-
- '&$expanded': {
- margin: '16px 0',
- },
- },
- },
- },
- MuiBackdrop: {
- root: {
- backgroundColor: alpha('#000', 0.8),
- },
- },
- MuiDialog: {
- paper: {
- boxShadow: 'none',
- },
- container: {
- paddingBottom: 16,
- },
- },
- MuiDialogContent: {
- root: {
- paddingBottom: 16,
- },
- },
- MuiBottomNavigationAction: {
- root: {
- color: '#757575',
- '&$selected': {
- color: darkPalette.text.primary,
- },
- },
- label: {
- '& > span': {
- textTransform: 'none',
- },
- },
- },
- MuiSelect: {
- root: {
- '&$disabled + input + $icon': {
- opacity: 0.5,
- },
- },
- icon: {
- color: darkPalette.action.disabled,
- right: 16,
- },
- iconOutlined: {
- right: 16,
- },
- },
- MuiLinearProgress: {
- root: {
- height: 2,
- width: '100%',
- },
- barColorPrimary: {
- backgroundColor: darkPalette.success.main,
- },
- },
- // @ts-ignore
- MuiAlert: {
- root: {
- borderRadius: 8,
- padding: '8px 16px',
- },
- message: {
- color: darkPalette.text.primary,
- ...typography.caption,
- },
- standardInfo: {
- backgroundColor: alpha(darkPalette.info.main, 0.6),
- },
- standardSuccess: {
- backgroundColor: alpha(darkPalette.success.main, 0.6),
- },
- standardWarning: {
- backgroundColor: alpha(darkPalette.warning.main, 0.6),
- },
- standardError: {
- backgroundColor: alpha(darkPalette.error.main, 0.6),
- },
- },
- MuiAvatar: {
- root: {
- height: pxToRem(24),
- width: pxToRem(24),
- },
- },
- },
-}
-
-export const lightTheme: Theme = {
- palette: lightPalette,
- typography,
- breakpoints,
- props: {
- MuiTextField: {
- InputLabelProps: {
- shrink: true,
- },
- },
- // @ts-ignore
- MuiAlert: {
- icon: false,
- },
- },
- shape: {
- borderRadius: 18,
- },
- overrides: {
- MuiPaper: {
- root: {
- borderRadius: 32,
- },
- },
- MuiSlider: {
- root: {
- color: '#50BEAF',
- },
- rail: {
- color: '#D9D9D9',
- },
- mark: {
- color: '#D9D9D9',
- },
- },
- MuiTypography: {
- button: {
- textTransform: 'none',
- },
- },
- MuiTable: {
- root: {
- backgroundColor: lightPalette.background.paper,
- },
- },
- MuiSwitch: {
- root: {
- '&.MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track': {
- backgroundColor: '#323232',
- },
- },
- switchBase: {
- background: 'none',
- '&:hover, .checked:hover': {
- background: 'none',
- },
- },
- colorSecondary: {
- '&.Mui-checked + .MuiSwitch-track': {
- opacity: 1,
- backgroundColor: '#FFFFFF',
- },
- '&.MuiSwitch-colorSecondary.Mui-checked': {
- '&:hover': {
- background: 'none',
- },
- },
- },
- thumb: {
- backgroundColor: '#999999',
- },
- },
- MuiTableCell: {
- root: {
- height: pxToRem(76),
- padding: `${pxToRem(16)} ${pxToRem(32)}`,
- fontWeight: 400,
- fontSize: pxToRem(16),
- lineHeight: pxToRem(18.75),
- '&.MuiTableCell-head': {
- color: `${lightPalette.text.secondary} !important`,
- fontSize: pxToRem(16),
- fontWeight: 400,
- lineHeight: pxToRem(18.75),
- height: pxToRem(69),
- },
- },
- },
- MuiTableRow: {
- root: {
- borderBottom: `${pxToRem(1.016)} solid ${lightPalette.divider}`,
- cursor: 'pointer',
- transition: 'background-color 0.2s ease-in-out',
- '&:hover': {
- backgroundColor: lightPalette.divider,
- },
- },
- head: {
- '&:hover': {
- backgroundColor: lightPalette.background.paper,
- },
- },
- },
- MuiIconButton: {
- root: {
- '&:hover': {
- backgroundColor: 'transparent !important',
- },
- },
- },
- MuiButton: {
- root: {
- borderRadius: 16,
- fontFamily: FontFamily.KANIT,
- fontWeight: FontWeight.MEDIUM,
- letterSpacing: '0.04em',
- textTransform: 'none',
- },
- sizeSmall: {
- borderRadius: 8,
- fontSize: pxToRem(14),
- letterSpacing: 0,
- },
- sizeLarge: {
- borderRadius: 16,
- fontSize: pxToRem(16),
- letterSpacing: 0,
- fontWeight: 500,
- },
- contained: {
- padding: `13px 16px 11px 16px`,
- fontSize: pxToRem(14),
- boxShadow: 'none',
- '&$disabled, &$disabled:hover': {
- color: lightColors.textDisabled,
- backgroundColor: lightColors.backgroundDisabled,
- },
- '&:hover': {
- boxShadow: 'none',
- },
- },
- containedPrimary: {
- color: '#FFF',
- '& [class^=MuiButton-label]': {
- position: 'relative',
- width: 'initial',
- '&::after': {
- content: '""',
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: '1.5px',
- width: '100%',
- backgroundColor: 'transparent',
- transform: 'scaleX(0)',
- transition: 'transform 150ms ease-out',
- transformOrigin: 'left',
- },
- },
- '&:hover': {
- backgroundColor: lightPalette.primary.main,
- opacity: 0.65,
- boxShadow: 'none',
- },
- },
- containedSizeSmall: {
- padding: `6px 12px 4px 12px`,
- },
- containedSizeLarge: {
- padding: `20px 24px`,
- },
- outlined: {
- backgroundColor: 'transparent!important',
- color: lightPalette.primary.main,
- padding: `11px 15px 9px 15px`,
- fontSize: pxToRem(14),
- letterSpacing: pointsToRem(89),
- borderColor: `${lightPalette.primary.main}!important`,
- boxShadow: 'none',
- '&$disabled, &$disabled:hover': {
- color: '#666666',
- borderColor: '#404040!important',
- },
- '&:hover': {
- boxShadow: 'none',
- backgroundColor: 'transparent',
- },
- },
- outlinedPrimary: {
- border: `1px solid ${lightPalette.primary.main}`,
- '&:hover': {
- border: `1px solid ${lightPalette.primary.main}`,
- '& [class^=MuiButton-label]::after': {
- transform: 'scaleX(1)',
- },
- },
- '&$disabled': {
- border: `1px solid ${lightPalette.action.disabled}`,
- },
- '&$outlinedSizeSmall': {
- border: `1px solid ${lightPalette.primary.main}`,
- },
- '& [class^=MuiButton-label]': {
- position: 'relative',
- width: 'initial',
- '&::after': {
- content: '""',
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: '1.5px',
- width: '100%',
- backgroundColor: 'transparent',
- transform: 'scaleX(0)',
- transition: 'transform 150ms ease-out',
- transformOrigin: 'left',
- },
- },
- },
- outlinedSizeSmall: {
- padding: `5px 11px 3px 11px`,
- },
- outlinedSizeLarge: {
- padding: `18px 23px`,
- },
- },
- MuiInputBase: {
- formControl: {
- backgroundColor: lightColors.input,
- borderColor: lightPalette.divider,
- '&:hover': {
- backgroundColor: lightColors.input,
- },
- 'label + &': {
- marginTop: 24,
- },
- 'label.MuiFormLabel-filled + &:not($focused):not($error)': {
- backgroundColor: lightColors.input,
- },
- },
- root: {
- '& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
- display: 'none',
- },
- },
- },
- MuiOutlinedInput: {
- root: {
- borderRadius: 18,
- height: 56,
- backgroundColor: lightColors.input,
- color: lightColors.text,
- transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)',
- borderColor: lightColors.input,
- '&$focused:not($error) $notchedOutline': {
- borderWidth: 1,
- borderColor: lightColors.input,
- },
- '&$notchedOutline': {
- borderColor: lightColors.input,
- },
- '&$error $notchedOutline': {
- borderWidth: 1,
- borderColor: lightPalette.error.main,
- },
- '&$disabled': {
- backgroundColor: lightPalette.action.disabledBackground,
- color: '#666666',
- '& $notchedOutline': {
- borderWidth: 0,
- },
- },
- '&$focused': {
- backgroundColor: lightColors.input,
- borderColor: lightColors.input,
- },
- '&:hover $notchedOutline': {
- borderColor: lightColors.input,
- },
- 'label.MuiFormLabel-filled + &:not($focused):not($error) $notchedOutline': {
- borderColor: lightColors.input,
- },
- },
- focused: {},
- disabled: {},
- error: {},
- input: {
- fontSize: pxToRem(16),
- padding: `${(56 - 24) / 2}px 16px`,
- },
- notchedOutline: {
- display: 'none',
- top: 0,
- '& > legend': {
- display: 'none',
- },
- },
- },
- MuiInputAdornment: {
- root: {
- color: '#757575',
- },
- },
- MuiInputLabel: {
- outlined: {
- '&$shrink': {
- transform: 'translateY(3px) scale(0.9)',
- fontSize: pxToRem(14),
- lineHeight: pxToRem(20),
- letterSpacing: 0.25,
- },
- '&$disabled': {
- color: lightPalette.action.disabled,
- },
- },
- shrink: {},
- disabled: {},
- },
- MuiFormHelperText: {
- contained: {
- marginLeft: 0,
- marginRight: 0,
- },
- },
- MuiFormLabel: {
- root: {
- color: lightPalette.text.secondary,
- },
- },
- MuiChip: {
- root: {
- backgroundColor: lightPalette.action.disabledBackground,
- color: lightPalette.action.disabled,
- cursor: 'pointer',
- width: 85,
- height: 28,
- },
- },
- MuiTooltip: {
- tooltip: {
- borderRadius: 4,
- color: lightPalette.primary.contrastText,
- backgroundColor: lightPalette.primary.light,
- maxWidth: 140,
- },
- arrow: {
- color: lightPalette.primary.light,
- },
- },
- MuiAccordionSummary: {
- root: {
- margin: 0,
- [breakpoints.up('md')]: {
- padding: '0 24px',
- },
- '&$expanded': {
- minHeight: 56,
- },
- },
- content: {
- margin: '12px 0',
-
- '&$expanded': {
- margin: '12px 0',
- },
- [breakpoints.up('md')]: {
- margin: '16px 0',
-
- '&$expanded': {
- margin: '16px 0',
- },
- },
- },
- },
- MuiBackdrop: {
- root: {
- backgroundColor: alpha('#000', 0.8),
- },
- },
- MuiDialog: {
- paper: {
- boxShadow: 'none',
- },
- container: {
- paddingBottom: 16,
- },
- },
- MuiDialogContent: {
- root: {
- paddingBottom: 16,
- },
- },
- MuiBottomNavigationAction: {
- root: {
- color: '#757575',
- '&$selected': {
- color: lightPalette.text.primary,
- },
- },
- label: {
- '& > span': {
- textTransform: 'none',
- },
- },
- },
- MuiSelect: {
- root: {
- '&$disabled + input + $icon': {
- opacity: 0.5,
- },
- },
- icon: {
- color: lightPalette.action.disabled,
- right: 16,
- },
- iconOutlined: {
- right: 16,
- },
- },
- MuiLinearProgress: {
- root: {
- height: 2,
- width: '100%',
- },
- barColorPrimary: {
- backgroundColor: lightPalette.success.main,
- },
- },
- // @ts-ignore
- MuiAlert: {
- root: {
- borderRadius: 8,
- padding: '8px 16px',
- },
- message: {
- color: lightPalette.text.primary,
- ...typography.caption,
- },
- standardInfo: {
- backgroundColor: alpha(lightPalette.info.main, 0.6),
- },
- standardSuccess: {
- backgroundColor: alpha(lightPalette.success.main, 0.6),
- },
- standardWarning: {
- backgroundColor: alpha(lightPalette.warning.main, 0.6),
- },
- standardError: {
- backgroundColor: alpha(lightPalette.error.main, 0.6),
- },
- },
- MuiAvatar: {
- root: {
- height: pxToRem(24),
- width: pxToRem(24),
- },
- },
- },
-}
diff --git a/apps/bridge/next.config.mjs b/apps/bridge/next.config.mjs
index 6d3dddb206768..28a430f5a1c9c 100755
--- a/apps/bridge/next.config.mjs
+++ b/apps/bridge/next.config.mjs
@@ -19,6 +19,15 @@ const nextConfig = {
compiler: {
styledComponents: true,
},
+ async redirects() {
+ return [
+ {
+ source: '/aptos',
+ destination: '/stargate',
+ permanent: true,
+ },
+ ]
+ }
}
export default withAxiom(withVanillaExtract(withWebSecurityHeaders(nextConfig)))
diff --git a/apps/bridge/pages/aptos.tsx b/apps/bridge/pages/aptos.tsx
deleted file mode 100644
index 2b8e5ee6bf2a0..0000000000000
--- a/apps/bridge/pages/aptos.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react'
-import Script from 'next/script'
-import styled, { useTheme } from 'styled-components'
-import { Flex, Box } from '@pancakeswap/uikit'
-import { LAYER_ZERO_JS } from 'components/layerZero/config'
-import { LayerZeroWidget } from 'components/layerZero/LayerZeroWidget'
-import AptosBridgeMessage from 'components/layerZero/AptosBridgeMessage'
-import AptosBridgeFooter from 'components/layerZero/AptosBridgeFooter'
-
-const Page = styled(Box)`
- display: flex;
- height: 100%;
- height: calc(100vh - 56px);
- background: ${({ theme }) => theme.colors.backgroundAlt};
-
- ${({ theme }) => theme.mediaQueries.sm} {
- min-height: 1000px;
- background: ${({ theme }) => theme.colors.gradientBubblegum};
- }
-`
-
-const AptosBridge = () => {
- const theme = useTheme()
- const [show, setShow] = useState(false)
-
- useEffect(() => {
- customElements.whenDefined('aptos-bridge').then(() => {
- window.aptosBridge.bridge.setDstNativeAmount('0.05')
- window.aptosBridge.config.setTokens(['ETH', 'WETH', 'USDC', 'USDT'])
- window.aptosBridge.config.setWallets(['MetaMask', 'CoinBase', 'Petra', 'Martian', 'Pontem', 'Fewcha'])
- setShow(true)
- })
- }, [])
-
- return (
-
-
-
- {show && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- )
-}
-
-export default AptosBridge
diff --git a/apps/bridge/pages/index.tsx b/apps/bridge/pages/index.tsx
index e848b25b2145e..ed809b29307ba 100644
--- a/apps/bridge/pages/index.tsx
+++ b/apps/bridge/pages/index.tsx
@@ -1,55 +1,7 @@
-import { useEffect, useState } from 'react'
-import Script from 'next/script'
-import styled, { useTheme } from 'styled-components'
-import { Flex, Box } from '@pancakeswap/uikit'
-import { LAYER_ZERO_JS } from 'components/layerZero/config'
-import { LayerZeroWidget } from 'components/layerZero/LayerZeroWidget'
-import AptosBridgeFooter from 'components/layerZero/AptosBridgeFooter'
+import LayerZero from 'components/layerZero'
-const Page = styled(Box)`
- display: flex;
- height: 100%;
- height: calc(100vh - 56px);
- background: ${({ theme }) => theme.colors.backgroundAlt};
-
- ${({ theme }) => theme.mediaQueries.sm} {
- min-height: 1000px;
- background: ${({ theme }) => theme.colors.gradientBubblegum};
- }
-`
-
-const AptosBridge = () => {
- const theme = useTheme()
- const [show, setShow] = useState(false)
-
- useEffect(() => {
- customElements.whenDefined('aptos-bridge').then(() => {
- window.aptosBridge.bridge.setDstNativeAmount('0.05')
- window.aptosBridge.config.setTokens(['CAKE'])
- window.aptosBridge.config.setWallets(['MetaMask', 'CoinBase', 'Petra', 'Martian', 'Pontem', 'Fewcha'])
- setShow(true)
- })
- }, [])
-
- return (
-
-
-
- {show && (
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- )
+const HomePage = () => {
+ return
}
-export default AptosBridge
+export default HomePage
diff --git a/apps/bridge/pages/stargate.tsx b/apps/bridge/pages/stargate.tsx
index f293c2e2f2e08..8bd035f131c6a 100644
--- a/apps/bridge/pages/stargate.tsx
+++ b/apps/bridge/pages/stargate.tsx
@@ -1,98 +1,7 @@
-import Script from 'next/script'
-import { useEffect, useState } from 'react'
-import Image from 'next/image'
-import styled, { useTheme } from 'styled-components'
-import { Flex, Text, Box } from '@pancakeswap/uikit'
-import { STARGATE_JS } from '../components/stargate/config'
-import { StargateWidget } from '../components/stargate'
-
-const Page = styled.div`
- height: 100%;
- display: flex;
- justify-content: center;
- min-height: calc(100% - 56px);
- align-items: center;
- flex-direction: column;
- background: ${({ theme }) => theme.colors.gradientBubblegum};
-
- ${({ theme }) => theme.mediaQueries.sm} {
- display: grid;
- place-content: center;
- }
-`
-
-declare global {
- interface Window {
- // Stargate custom element api
- stargate?: any
- }
-}
+import LayerZero from 'components/layerZero'
function Stargate() {
- const theme = useTheme()
-
- const [show, setShow] = useState(false)
-
- useEffect(() => {
- customElements.whenDefined('stargate-widget').then(() => {
- setTimeout(() => {
- if (window.stargate) {
- window.stargate.setDstChainId(102)
- }
- }, 600)
- console.info('stargate widget mount')
- setShow(true)
- })
- }, [])
-
- return (
-
-
-
-
- {show && (
-
-
-
- )}
-
- {show && (
-
-
-
- )}
-
- )
-}
-
-function PoweredBy() {
- const { isDark } = useTheme()
- return (
-
-
- Powered By
-
-
-
-
-
- )
+ return
}
export default Stargate
diff --git a/package.json b/package.json
index a84c830375008..f57ac68bce673 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"dev": "turbo run dev --filter=web... --concurrency=19",
"dev:aptos": "pnpm turbo run dev --filter=aptos-web... --concurrency=19",
"dev:blog": "pnpm turbo run dev --filter=blog...",
- "dev:bridge": "pnpm turbo run dev --filter=bridge...",
+ "dev:bridge": "pnpm turbo run dev --filter=bridge... --concurrency=16",
"storybook": "turbo run start --filter=uikit...",
"build:storybook": "turbo run build:storybook --filter=uikit...",
"build": "turbo run build --filter=web...",