diff --git a/src/components/Aggregator/ConnectButton.tsx b/src/components/Aggregator/ConnectButton.tsx
index 9a849857c..c53e57255 100644
--- a/src/components/Aggregator/ConnectButton.tsx
+++ b/src/components/Aggregator/ConnectButton.tsx
@@ -1,19 +1,38 @@
import { ConnectButton } from '@rainbow-me/rainbowkit';
import styled from 'styled-components';
import { HistoryModal } from '../HistoryModal';
+import ReactSelect from '~/components/MultiSelect';
const Wrapper = styled.div`
position: absolute;
- right: 0px;
+ right: 15px;
+ top: 70px;
z-index: 100;
display: flex;
gap: 8px;
+
+ @media screen and (max-width: ${({ theme }) => theme.bpLg}) {
+ top: 60px;
+ }
+
+ @media screen and (max-width: ${({ theme }) => `${parseInt(theme.bpMed.replace('rem', '')) - 2.01}rem`}) {
+ top: 14px;
+ }
`;
-const Connect = ({ tokenList = null, tokensUrlMap = {}, tokensSymbolsMap = {} }) => {
+const Connect = ({
+ tokenList = null,
+ tokensUrlMap = {},
+ tokensSymbolsMap = {},
+ chains,
+ selectedChain,
+ onChainChange
+}) => {
return (
-
+
+
+
{tokenList ? : null}
);
diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx
index bd40af588..25771657b 100644
--- a/src/components/Aggregator/index.tsx
+++ b/src/components/Aggregator/index.tsx
@@ -34,7 +34,6 @@ import {
PopoverTrigger,
PopoverContent
} from '@chakra-ui/react';
-import ReactSelect from '~/components/MultiSelect';
import FAQs from '~/components/FAQs';
import SwapRoute, { LoadingRoute } from '~/components/SwapRoute';
import { adaptersNames, getAllChains, swap, gaslessApprove } from './router';
@@ -55,7 +54,6 @@ import RoutesPreview from './RoutesPreview';
import { formatSuccessToast, formatErrorToast, formatSubmittedToast } from '~/utils/formatToast';
import { useDebounce } from '~/hooks/useDebounce';
import { useGetSavedTokens } from '~/queries/useGetSavedTokens';
-import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useLocalStorage } from '~/hooks/useLocalStorage';
import SwapConfirmation from './SwapConfirmation';
import { getBalance, useBalance } from '~/queries/useBalance';
@@ -70,6 +68,7 @@ import { ArrowBackIcon, ArrowForwardIcon, RepeatIcon, SettingsIcon } from '@chak
import { Settings } from './Settings';
import { formatAmount } from '~/utils/formatAmount';
import { RefreshIcon } from '../RefreshIcon';
+import Connect from './ConnectButton';
/*
Integrated:
@@ -161,7 +160,6 @@ const Wrapper = styled.div`
flex-direction: column;
grid-row-gap: 36px;
margin: 0px auto 40px;
- position: relative;
h1 {
font-weight: 500;
@@ -1035,6 +1033,8 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
return (
+
+
{isSettingsModalOpen ? (
- Chain
-
@@ -1063,6 +1061,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
/>
+
setSettingsModalOpen((open) => !open)} ml={4} mt={1} cursor="pointer" />
{isSmallScreen && finalSelectedFromToken && finalSelectedToToken ? (
-
-
diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
index 5d021d90e..22f7f99e0 100644
--- a/src/components/MultiSelect/index.tsx
+++ b/src/components/MultiSelect/index.tsx
@@ -75,7 +75,9 @@ const customStyles = {
menu: (provided) => ({
...provided,
background: 'var(--menu-background)',
- zIndex: 10
+ zIndex: 10,
+ width: '120px',
+ right: '3px'
}),
menuList: (provided) => ({
...provided,
@@ -105,7 +107,19 @@ const customStyles = {
}),
singleValue: (provided, state) => ({
...provided,
- color: 'var(--color)'
+ color: 'var(--color)',
+ fontWeight: 700,
+ fontSize: '0.9rem',
+ paddingTop: '1px'
+ }),
+ indicatorSeparator: () => ({ display: 'none' }),
+ dropdownIndicator: (provided, state) => ({
+ ...provided,
+ paddingLeft: '0px'
+ }),
+ valueContainer: (styles) => ({
+ ...styles,
+ paddingRight: '3px'
})
};
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 45db05cd8..d1d6517a6 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -22,6 +22,7 @@ const TabButtonsWrapper = styled.div`
box-shadow: 10px 0px 50px 10px rgba(26, 26, 26, 0.6);
position: relative;
overflow: hidden;
+ z-index: 1;
`;
const TabList = styled.ul`
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 2332e17fc..82b29abdb 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -3,7 +3,6 @@ import Head from 'next/head';
import styled from 'styled-components';
import ThemeProvider, { GlobalStyle } from '~/Theme';
import { Phishing } from './Phishing';
-import ConnectButton from '~/components/Aggregator/ConnectButton';
import Header from '~/components/Aggregator/Header';
const PageWrapper = styled.div`
@@ -52,9 +51,7 @@ export default function Layout({ title, children, ...props }: ILayoutProps) {
-
+
{children}