diff --git a/src/components/aelin/GasSelector.tsx b/src/components/aelin/GasSelector.tsx index 1a8b3a1f..e3388a60 100644 --- a/src/components/aelin/GasSelector.tsx +++ b/src/components/aelin/GasSelector.tsx @@ -167,7 +167,7 @@ const GasSelector = ({ } }, [customGasPrice, gasPriceL1, ethGasPriceDataL2, gasSpeed, isL2Chain]) - const transactionFee = useMemo( + const transactionFeeInUSD = useMemo( () => getTransactionPrice( gasPriceL1, @@ -250,7 +250,7 @@ const GasSelector = ({ />   - (${transactionFee}) + (${transactionFeeInUSD}) {!isL2Chain && ( speed === gasSpeed)} diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 4a55df09..896679d5 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -2,8 +2,10 @@ import Image from 'next/image' import Link from 'next/link' import styled, { css } from 'styled-components' -import EthlizardsLogo from '../../../public/resources/lizards/AelinXEthlizards.svg' +import { isMobile } from 'react-device-detect' + import { NetworkPlaceholder } from '../common/NetworkPlaceholder' +import EthlizardsLogo from '@/public/resources/lizards/AelinXEthlizards.svg' import { ChevronDown } from '@/src/components/assets/ChevronDown' import { DarkMode } from '@/src/components/assets/DarkMode' import { Docs } from '@/src/components/assets/Docs' @@ -22,7 +24,7 @@ import { ButtonPrimary } from '@/src/components/pureStyledComponents/buttons/But import { ButtonDropdown as BaseButtonDropdown } from '@/src/components/pureStyledComponents/buttons/Button' import { BaseCardCSS } from '@/src/components/pureStyledComponents/common/BaseCard' import { InnerContainer as BaseInnerContainer } from '@/src/components/pureStyledComponents/layout/InnerContainer' -import { getChainsByEnvironmentArray, getNetworkConfig } from '@/src/constants/chains' +import { Chains, getChainsByEnvironmentArray, getNetworkConfig } from '@/src/constants/chains' import { AELIN_APP_DEV_URL } from '@/src/constants/misc' import { ThemeType } from '@/src/constants/types' import { useThemeContext } from '@/src/providers/themeContextProvider' @@ -248,7 +250,7 @@ const RedirectLink = styled.a` export const Header: React.FC = (props) => { const { - address = '', + address, appChainId, connectWallet, isWalletConnected, @@ -295,7 +297,18 @@ export const Header: React.FC = (props) => { ) : ( - Aelin x Ethlizard + Aelin x Ethlizard )} @@ -331,7 +344,7 @@ export const Header: React.FC = (props) => { dropdownButtonContent={ - {address && {shortenAddress(address)}} + {isWalletConnected && address && {shortenAddress(address)}} } @@ -369,7 +382,7 @@ export const Header: React.FC = (props) => { , @@ -378,7 +391,7 @@ export const Header: React.FC = (props) => { , diff --git a/src/components/pureStyledComponents/common/BaseCard.tsx b/src/components/pureStyledComponents/common/BaseCard.tsx index 7b00d4b6..311b247d 100644 --- a/src/components/pureStyledComponents/common/BaseCard.tsx +++ b/src/components/pureStyledComponents/common/BaseCard.tsx @@ -14,8 +14,6 @@ export const BaseCardCSS = css` position: absolute; width: 100%; height: 100%; - backdrop-filter: ${({ theme: { card } }) => card.backdropFilter}; - -webkit-backdrop-filter: ${({ theme: { card } }) => card.backdropFilter}; z-index: -1; } ` diff --git a/src/components/pureStyledComponents/common/Table.tsx b/src/components/pureStyledComponents/common/Table.tsx index 24e5468c..2da55e8a 100644 --- a/src/components/pureStyledComponents/common/Table.tsx +++ b/src/components/pureStyledComponents/common/Table.tsx @@ -27,7 +27,6 @@ export const TableBody = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 20px; - backdrop-filter: ${({ theme: { card } }) => card.backdropFilter}; @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletPortraitStart}) { grid-template-columns: repeat(4, 1fr); diff --git a/src/constants/chains.tsx b/src/constants/chains.tsx index 44897d8e..93164028 100644 --- a/src/constants/chains.tsx +++ b/src/constants/chains.tsx @@ -115,8 +115,7 @@ export const chainsConfig: Record = { symbol: 'ETH', decimals: BASE_DECIMALS, }, - buyAelinUrl: - 'https://app.uniswap.org/#/swap?outputCurrency=0x61BAADcF22d2565B0F471b291C475db5555e0b76&inputCurrency=ETH&chain=optimism', + buyAelinUrl: 'https://app.velodrome.finance/swap', isL2: true, }, [Chains.arbitrum]: { diff --git a/src/hooks/useGasPrice.tsx b/src/hooks/useGasPrice.tsx index 6a137013..7988a59f 100644 --- a/src/hooks/useGasPrice.tsx +++ b/src/hooks/useGasPrice.tsx @@ -17,14 +17,15 @@ const useEthGasPrice = () => { appChainId ? ['network', 'gasPrice', appChainId] : null, async () => { try { - const block = await mainnetRpcProvider.getBlock('latest') + const l1Block = await mainnetRpcProvider.getBlock('latest') const l2Block = await readOnlyAppProvider.getBlock('latest') const l2GasPrice = l2Block?.baseFeePerGas ? getGasPriceEIP1559(l2Block.baseFeePerGas, appChainId) : await getGasPriceFromProvider(readOnlyAppProvider) + return { - l1: block?.baseFeePerGas - ? getGasPriceEIP1559(block.baseFeePerGas, Chains.mainnet) + l1: l1Block?.baseFeePerGas + ? getGasPriceEIP1559(l1Block.baseFeePerGas, Chains.mainnet) : await getGasPriceFromProvider(mainnetRpcProvider), l2: isL2Chain ? l2GasPrice : undefined, } diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index d1b03e32..b42b61a2 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -27,7 +27,9 @@ const areaChartGradientEnd = '#232A37' export const darkTheme = { body: { - backgoundImage: '/resources/svg/bg-main.svg', + backgroundImage: '/resources/svg/bg-main.svg', + backgroundRepeat: 'repeat', + backgroundSize: 'initial', }, modal: { overlayBackgroundColor: 'rgba(0, 0, 0, 0.6)', diff --git a/src/theme/ethlizardsTheme.ts b/src/theme/ethlizardsTheme.ts index 62787b7a..ad7466f7 100644 --- a/src/theme/ethlizardsTheme.ts +++ b/src/theme/ethlizardsTheme.ts @@ -27,9 +27,10 @@ const areaChartGradientEnd = '#232A37' const transparent = 'transparent' export const ethlizardsTheme = { - ethliz: {}, body: { - backgoundImage: `/resources/lizards/ethlizards_bg.png`, + backgroundImage: `/resources/lizards/ethlizards_bg.png`, + backgroundRepeat: 'initial', + backgroundSize: 'cover', }, modal: { overlayBackgroundColor: 'rgba(0, 0, 0, 0.6)', @@ -129,7 +130,6 @@ export const ethlizardsTheme = { backgroundColor: componentBackgroundColor, borderColor: componentBorder, titleColor: textColor, - backdropFilter: 'blur(5px)', }, colors: { blueishGray: blueishGray, diff --git a/src/theme/globalStyle.tsx b/src/theme/globalStyle.tsx index bcf0b3cd..37ade2fb 100644 --- a/src/theme/globalStyle.tsx +++ b/src/theme/globalStyle.tsx @@ -22,8 +22,9 @@ export const GlobalStyle = createGlobalStyle<{ theme: any }>` width: 100%; @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletLandscapeStart}) { - background-image: url(${({ theme }) => theme.body.backgoundImage}); - background-repeat: repeat; + background-image: url(${({ theme }) => theme.body.backgroundImage}); + background-repeat: ${({ theme }) => theme.body.backgroundRepeat}; + background-size: ${({ theme }) => theme.body.backgroundSize}; } } diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index 4c731dac..144d4e61 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -25,7 +25,9 @@ const areaChartGradientEnd = '#232A37' export const lightTheme = { body: { - backgoundImage: '/resources/svg/bg-main.svg', + backgroundImage: '/resources/svg/bg-main.svg', + backgroundRepeat: 'repeat', + backgroundSize: 'initial', }, modal: { overlayBackgroundColor: 'rgba(0, 0, 0, 0.6)', diff --git a/src/utils/gasUtils.ts b/src/utils/gasUtils.ts index bc1ef00f..4500a340 100644 --- a/src/utils/gasUtils.ts +++ b/src/utils/gasUtils.ts @@ -100,18 +100,33 @@ export const getGasPriceEIP1559 = (baseFeePerGas: BigNumber, appChainId: ChainsV case Chains.sepolia: return { low: { - maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(1)).add(wei(1, 9)), + maxFeePerGas: wei(baseFeePerGas, 9), maxPriorityFeePerGas: wei(1, 9), }, market: { - maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(1.5).add(wei(1.5, 9))), + maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(1.5, 9)), maxPriorityFeePerGas: wei(1.5, 9), }, aggressive: { - maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(2).add(wei(2, 9))), + maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(2, 9)), maxPriorityFeePerGas: wei(2, 9), }, } + case Chains.optimism: + return { + low: { + maxFeePerGas: wei(baseFeePerGas, 9), + maxPriorityFeePerGas: wei(9, undefined, true), + }, + market: { + maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(1.5, 9)), + maxPriorityFeePerGas: wei(14, undefined, true), + }, + aggressive: { + maxFeePerGas: wei(baseFeePerGas, 9).mul(wei(2, 9)), + maxPriorityFeePerGas: wei(18, undefined, true), + }, + } case Chains.polygon: return { low: {