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) => {
) : (
-
+
)}
@@ -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: {