Merge staging in main

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 = ({
         />
       </div>
       &nbsp;
-      <DollarValue>(${transactionFee})</DollarValue>
+      <DollarValue>(${transactionFeeInUSD})</DollarValue>
       {!isL2Chain && (
         <Dropdown
           currentItem={GAS_SPEEDS.findIndex((speed) => speed === gasSpeed)}

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) => {
                   <Logo />
                 ) : (
                   <EthlizardWrapper>
-                    <Image alt="Aelin x Ethlizard" priority src={EthlizardsLogo} />
+                    <Image
+                      alt="Aelin x Ethlizard"
+                      priority
+                      src={EthlizardsLogo}
+                      {...(isMobile &&
+                        !isWalletConnected && {
+                          style: {
+                            width: '220px',
+                            marginLeft: '55px',
+                          },
+                        })}
+                    />
                   </EthlizardWrapper>
                 )}
               </HomeLink>
@@ -331,7 +344,7 @@ export const Header: React.FC = (props) => {
                   dropdownButtonContent={
                     <DropdownButton>
                       <Metamask />
-                      {address && <Item>{shortenAddress(address)}</Item>}
+                      {isWalletConnected && address && <Item>{shortenAddress(address)}</Item>}
                       <ChevronDown />
                     </DropdownButton>
                   }
@@ -369,7 +382,7 @@ export const Header: React.FC = (props) => {
                 </DropdownItem>,
                 <DropdownItem
                   as="a"
-                  href="https://app.uniswap.org/#/swap?outputCurrency=0xa9c125bf4c8bb26f299c00969532b66732b1f758&inputCurrency=ETH&chain=mainnet"
+                  href={getNetworkConfig(Chains.mainnet).buyAelinUrl}
                   key={'external_links_2'}
                   target="_blank"
                 >
@@ -378,7 +391,7 @@ export const Header: React.FC = (props) => {
                 </DropdownItem>,
                 <DropdownItem
                   as="a"
-                  href="https://app.uniswap.org/#/swap?outputCurrency=0x61BAADcF22d2565B0F471b291C475db5555e0b76&inputCurrency=ETH&chain=optimism"
+                  href={getNetworkConfig(Chains.optimism).buyAelinUrl}
                   key={'external_links_3'}
                   target="_blank"
                 >

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;
   }
 `

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);

src/constants/chains.tsx

@@ -115,8 +115,7 @@ export const chainsConfig: Record<ChainsValues, ChainConfig> = {
       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]: {

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,
         }

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)',

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,

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};
     }
   }
 

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)',

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: {