move chain switcher to top right

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 (
 		<Wrapper>
-			<ConnectButton chainStatus={'none'} />
+			<ReactSelect options={chains} value={selectedChain} onChange={onChainChange} />
+
+			<ConnectButton chainStatus={'none'} showBalance={false} />
 			{tokenList ? <HistoryModal tokensUrlMap={tokensUrlMap} tokensSymbolsMap={tokensSymbolsMap} /> : null}
 		</Wrapper>
 	);

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 (
 		<Wrapper>
+			<Connect chains={chains} selectedChain={selectedChain} onChainChange={onChainChange} />
+
 			{isSettingsModalOpen ? (
 				<Settings
 					adapters={adaptersNames}
@@ -1049,8 +1049,6 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 					<div>
 						<FormHeader>
 							<Flex>
-								<Box>Chain</Box>
-								<Spacer />
 								<Tooltip content="Redirect requests through the DefiLlama Server to hide your IP address">
 									<FormControl display="flex" alignItems="baseline" gap="6px" justifyContent={'center'}>
 										<FormLabel htmlFor="privacy-switch" margin={0} fontSize="14px" color="gray.400">
@@ -1063,6 +1061,7 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 										/>
 									</FormControl>
 								</Tooltip>
+								<Spacer />
 								<SettingsIcon onClick={() => setSettingsModalOpen((open) => !open)} ml={4} mt={1} cursor="pointer" />
 								{isSmallScreen && finalSelectedFromToken && finalSelectedToToken ? (
 									<ArrowForwardIcon
@@ -1075,8 +1074,6 @@ export function AggregatorContainer({ tokenList, sandwichList }) {
 								) : null}
 							</Flex>
 						</FormHeader>
-
-						<ReactSelect options={chains} value={selectedChain} onChange={onChainChange} />
 					</div>
 
 					<Flex flexDir="column" gap="4px" pos="relative">

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

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`

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) {
 				<GlobalStyle />
 				<PageWrapper>
 					<Center {...props}>
-						<Header>
-							<ConnectButton {...(props as any)} />
-						</Header>
+						<Header {...(children as any)}></Header>
 						{children}
 					</Center>
 				</PageWrapper>