Chore/banner swap update (#2557)

Author: foodaka

src/components/transactions/Swap/SwapModal.tsx

@@ -1,8 +1,11 @@
 import { Trans } from '@lingui/macro';
+import { Box, Typography } from '@mui/material';
 import React from 'react';
 import { BasicModal } from 'src/components/primitives/BasicModal';
 import { UserAuthenticated } from 'src/components/UserAuthenticated';
+import { ConnectWalletButton } from 'src/components/WalletConnection/ConnectWalletButton';
 import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
+import { useRootStore } from 'src/store/root';
 
 import { ModalWrapper } from '../FlowCommons/ModalWrapper';
 import { SwapModalContent } from './SwapModalContent';
@@ -11,15 +14,26 @@ export const SwapModal = () => {
   const { type, close, args } = useModalContext() as ModalContextType<{
     underlyingAsset: string;
   }>;
+  const account = useRootStore((store) => store.account);
+
   return (
     <BasicModal open={type === ModalType.Swap} setOpen={close}>
-      <ModalWrapper title={<Trans>Swap</Trans>} underlyingAsset={args.underlyingAsset}>
-        {(params) => (
-          <UserAuthenticated>
-            {(user) => <SwapModalContent {...params} user={user} />}
-          </UserAuthenticated>
-        )}
-      </ModalWrapper>
+      {!account ? (
+        <Box sx={{ display: 'flex', flexDirection: 'column', mt: 4, alignItems: 'center' }}>
+          <Typography sx={{ mb: 6, textAlign: 'center' }} color="text.secondary">
+            <Trans>Please connect your wallet to swap tokens.</Trans>
+          </Typography>
+          <ConnectWalletButton onClick={() => close()} />
+        </Box>
+      ) : (
+        <ModalWrapper title={<Trans>Swap</Trans>} underlyingAsset={args.underlyingAsset}>
+          {(params) => (
+            <UserAuthenticated>
+              {(user) => <SwapModalContent {...params} user={user} />}
+            </UserAuthenticated>
+          )}
+        </ModalWrapper>
+      )}
     </BasicModal>
   );
 };

src/layouts/MainLayout.tsx

@@ -6,7 +6,7 @@ import AnalyticsConsent from 'src/components/Analytics/AnalyticsConsent';
 import { useModalContext } from 'src/hooks/useModal';
 import { FeedbackModal } from 'src/layouts/FeedbackDialog';
 // import { useRootStore } from 'src/store/root';
-import { CustomMarket } from 'src/ui-config/marketsConfig';
+// import { CustomMarket } from 'src/ui-config/marketsConfig';
 import { FORK_ENABLED } from 'src/utils/marketsAndNetworksConfig';
 
 // import { useShallow } from 'zustand/shallow';
@@ -15,7 +15,8 @@ import { AppHeader } from './AppHeader';
 import TopBarNotify from './TopBarNotify';
 
 const getCampaignConfigs = (
-  openSwitch: (token?: string, chainId?: number) => void
+  // openSwitch: (token?: string, chainId?: number) => void,
+  openSwap: (underlyingAsset: string) => void
   // openMarket: (market: CustomMarket) => void
 ) => ({
   [ChainId.base]: {
@@ -46,7 +47,7 @@ const getCampaignConfigs = (
     buttonText: 'Get Started',
     buttonAction: {
       type: 'function' as const,
-      value: () => openSwitch(CustomMarket.proto_mainnet_v3),
+      value: () => openSwap('0x3b3fb9c57858ef816833dc91565efcd85d96f634'),
     },
     bannerVersion: 'ethereum-swap-v1',
     // icon: '/icons/networks/ethereum.svg',
@@ -120,7 +121,7 @@ const getCampaignConfigs = (
 });
 
 export function MainLayout({ children }: { children: ReactNode }) {
-  const { openSwitch } = useModalContext();
+  const { openSwap } = useModalContext();
   // const router = useRouter();
   // const setCurrentMarket = useRootStore(useShallow((store) => store.setCurrentMarket));
 
@@ -129,7 +130,7 @@ export function MainLayout({ children }: { children: ReactNode }) {
   //   router.push(`/markets/?marketName=${market}`);
   // };
 
-  const campaignConfigs = getCampaignConfigs(openSwitch);
+  const campaignConfigs = getCampaignConfigs(openSwap);
 
   return (
     <>

src/locales/en/messages.po

@@ -1064,6 +1064,7 @@ msgstr "Reload"
 msgid "sGHO"
 msgstr "sGHO"
 
+#: src/components/transactions/Swap/SwapModal.tsx
 #: src/components/transactions/Switch/BaseSwitchModal.tsx
 #: src/components/transactions/Switch/BaseSwitchModalContent.tsx
 msgid "Please connect your wallet to swap tokens."