🚸 get-exa: cross-chain, drawer & reminder fix

components/getEXA/ChainSelector.tsx → components/GetEXA/ChainSelector.tsx

@@ -41,7 +41,7 @@ function ChainOption({ chain, option = false, optionSize = 17, selectedSize = 14
           }}
         />
       )}
-      <Typography fontWeight={600} fontSize={size} color="grey.900" data-testid="get-exa-chain">
+      <Typography fontWeight={600} fontSize={size} color="grey.900">
         {chain.name}
       </Typography>
     </Box>

components/GetEXA/ModalWrapper.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import Link from 'next/link';
+import CloseIcon from '@mui/icons-material/Close';
+import { Trans, useTranslation } from 'react-i18next';
+import { Box, Drawer, IconButton, Typography } from '@mui/material';
+
+import GetEXA from '.';
+import { useModal } from '../../contexts/ModalContext';
+import { GetEXAProvider } from 'contexts/GetEXAContext';
+
+export default function ModalWrapper() {
+  const { isOpen, close } = useModal('get-exa');
+  const { t } = useTranslation();
+  if (!isOpen) return null;
+  return (
+    <Drawer
+      open={isOpen}
+      onClose={close}
+      SlideProps={{
+        appear: true,
+        direction: 'right',
+      }}
+      PaperProps={{
+        sx: {
+          bgcolor: ({ palette: { mode } }) => (mode === 'light' ? 'grey.100' : 'black'),
+        },
+      }}
+    >
+      <IconButton onClick={close} sx={{ position: 'absolute', right: 8, top: 8 }}>
+        <CloseIcon />
+      </IconButton>
+      <Box maxWidth={576} paddingX={6} paddingY={7}>
+        <Typography fontWeight={700} fontSize={24} mb={3}>
+          {t(`Get EXA`)}
+        </Typography>
+        <Typography fontWeight={500} fontSize={16} mb={5}>
+          <Trans
+            i18nKey="Getting EXA gives you the ability to make the most of the Protocol's offerings, actively engaging in <a>Governance</a>, or joining the community as an EXA holder."
+            components={{
+              a: (
+                <Link
+                  href="/governance"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    textDecoration: 'underline',
+                  }}
+                >
+                  {t('Governance')}
+                </Link>
+              ),
+            }}
+          />
+        </Typography>
+        <GetEXAProvider>
+          <GetEXA />
+        </GetEXAProvider>
+      </Box>
+    </Drawer>
+  );
+}

components/getEXA/SelectRoute.tsx → components/GetEXA/SelectRoute.tsx

@@ -63,7 +63,7 @@ const SelectRoute = () => {
               <Typography fontSize={14} fontWeight={500}>
                 {t('Network')}:
               </Typography>
-              <ChainSelector disabled />
+              <ChainSelector />
             </Box>
             {chain && (
               <Box display="flex" alignItems="center" gap={1} fontSize="14px">

components/MaturityDateReminder/index.tsx

@@ -1,57 +1,61 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Snackbar from '@mui/material/Snackbar';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { Alert, Slide, SlideProps } from '@mui/material';
+import { Alert, Box, IconButton, Slide, SlideProps } from '@mui/material';
 import useAccountData from 'hooks/useAccountData';
 import parseTimestamp from 'utils/parseTimestamp';
+import CloseIcon from '@mui/icons-material/Close';
+
+const SECONDS_IN_A_DAY = 86400n;
+const RANGE_IN_SECONDS = SECONDS_IN_A_DAY * 5n;
 
 export default function MaturityDateReminder() {
   const { t } = useTranslation();
   const { accountData } = useAccountData();
-  const [openReminder, setOpenReminder] = useState<boolean>(false);
-  const [date, setDate] = useState<string>('');
-
-  useEffect(() => {
-    if (!accountData) return;
-
-    accountData.forEach((fixedLender) => {
-      fixedLender.fixedBorrowPositions.forEach((borrowPosition) => {
-        const { maturity } = borrowPosition;
-
-        const secondsInADay = 86_400n;
-        const rangeInSeconds = secondsInADay * 5n;
-        const currentTimestamp = BigInt(dayjs().unix());
-
-        if (maturity > currentTimestamp) {
-          const differenceInSeconds = maturity - currentTimestamp;
-
-          if (rangeInSeconds > differenceInSeconds) {
-            setDate(parseTimestamp(maturity.toString(), 'MMM DD, YYYY, HH:mm:ss'));
-            setOpenReminder(true);
-          }
-        }
-      });
-    });
-  }, [accountData]);
+  const [isReminderOpen, setIsReminderOpen] = useState(false);
+
+  const [date] = useMemo(
+    () =>
+      accountData
+        ? accountData.flatMap(({ fixedBorrowPositions }) =>
+            fixedBorrowPositions.map(({ maturity }) => {
+              const currentTimestamp = BigInt(dayjs().unix());
+              if (maturity <= currentTimestamp) return;
+              const differenceInSeconds = maturity - currentTimestamp;
+              if (RANGE_IN_SECONDS <= differenceInSeconds) return;
+              return parseTimestamp(maturity.toString(), 'MMM DD, YYYY, HH:mm:ss');
+            }),
+          )
+        : [],
+    [accountData],
+  );
+
+  useEffect(() => setIsReminderOpen(!!date), [date]);
 
   const handleClose = useCallback(() => {
-    setOpenReminder(false);
+    setIsReminderOpen(false);
   }, []);
 
   function SlideTransition(props: SlideProps) {
     return <Slide {...props} direction="down" />;
   }
 
-  return openReminder ? (
+  return isReminderOpen ? (
     <Snackbar
-      open={openReminder}
+      open={isReminderOpen}
+      autoHideDuration={10_000}
       onClose={handleClose}
       TransitionComponent={SlideTransition}
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
     >
-      <Alert severity="warning">
-        {t('Make sure to repay your fixed borrows before {{date}} to avoid penalty fees.', { date })}
+      <Alert severity="warning" sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box>{t('Make sure to repay your fixed borrows before {{date}} to avoid penalty fees.', { date })}</Box>
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
       </Alert>
     </Snackbar>
   ) : null;

components/Navbar/index.tsx

@@ -23,7 +23,6 @@ import Link from 'next/link';
 import Wallet from 'components/Wallet';
 import SelectMarketsView from 'components/SelectMarketsView';
 import { useTranslation } from 'react-i18next';
-import MaturityDateReminder from 'components/MaturityDateReminder';
 import { RewardsButton } from 'components/RewardsModal';
 import { useCustomTheme } from 'contexts/ThemeContext';
 import { useModal } from 'contexts/ModalContext';
@@ -135,7 +134,6 @@ function Navbar() {
 
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-      <MaturityDateReminder />
       <AppBar
         position="static"
         color="transparent"

components/VestingInput/index.tsx

@@ -41,12 +41,12 @@ import {
 import formatNumber from 'utils/formatNumber';
 import { WEI_PER_ETHER } from 'utils/const';
 import { toPercentage } from 'utils/utils';
-import Link from 'next/link';
 import useIsContract from 'hooks/useIsContract';
 import { gasLimit } from 'utils/gas';
 import { Transaction } from 'types/Transaction';
 import LoadingTransaction from 'components/common/modal/Loading';
 import useAnalytics from 'hooks/useAnalytics';
+import { useModal } from '../../contexts/ModalContext';
 
 type Params<T extends ExtractAbiFunctionNames<typeof escrowedExaABI>> = AbiParametersToPrimitiveTypes<
   ExtractAbiFunction<typeof escrowedExaABI, T>['inputs']
@@ -153,6 +153,7 @@ function VestingInput({ refetch }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [tx, setTx] = useState<Transaction>();
   const { transaction } = useAnalytics();
+  const { open: openGetEXA } = useModal('get-exa');
 
   const [qty, setQty] = useState<string>('');
 
@@ -406,7 +407,21 @@ function VestingInput({ refetch }: Props) {
                 <Trans
                   i18nKey="Not enough EXA for reserve. <1>Get EXA</1>."
                   components={{
-                    1: <Link href="/get-exa" style={{ fontWeight: 700, textDecoration: 'underline' }} />,
+                    1: (
+                      <button
+                        onClick={openGetEXA}
+                        style={{
+                          fontWeight: 700,
+                          textDecoration: 'underline',
+                          cursor: 'pointer',
+                          padding: 'unset',
+                          background: 'unset',
+                          border: 'unset',
+                          fontSize: 'unset',
+                          color: 'unset',
+                        }}
+                      />
+                    ),
                   }}
                 />
               </Typography>

contexts/GetEXAContext.tsx

@@ -398,6 +398,7 @@ export const GetEXAProvider: FC<PropsWithChildren> = ({ children }) => {
       setTX({ status: 'processing', hash: txHash_ });
       const { status, transactionHash } = await waitForTransaction({ hash: txHash_ });
       setTX({ status: status ? 'success' : 'error', hash: transactionHash });
+      setScreen(Screen.TX_STATUS);
     } catch (err) {
       setTXError({ status: true, message: handleOperationError(err) });
       setTXStep(TXStep.CONFIRM);

contexts/ModalContext.tsx

@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 import type { Operation } from 'types/Operation';
 import type { Position } from 'components/DebtManager/types';
 
-type Identifier = 'operation' | 'rewards' | 'rollover' | 'leverager' | 'proto-staker' | 'faucet';
+type Identifier = 'operation' | 'rewards' | 'rollover' | 'leverager' | 'proto-staker' | 'faucet' | 'get-exa';
 
 export type Args<T extends Identifier> = T extends 'operation'
   ? { operation: Operation; symbol: string; maturity?: bigint }

pages/_app.tsx

@@ -26,6 +26,8 @@ import StakingModal from 'components/StakingModal';
 import DebtManagerModal from 'components/DebtManager';
 import FaucetModal from 'components/operations/Faucet/Modal';
 import NewsModal from 'components/NewsModal';
+import GetEXAModal from 'components/GetEXA/ModalWrapper';
+import MaturityDateReminder from '../components/MaturityDateReminder';
 
 const { maxWidth } = globals;
 
@@ -37,6 +39,7 @@ const Modals = () => (
     <LeveragerModal />
     <StakingModal />
     <FaucetModal />
+    <GetEXAModal />
     {!isE2E && <NewsModal />}
   </>
 );
@@ -101,6 +104,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
                   <Footer />
                 </Box>
                 <Modals />
+                <MaturityDateReminder />
               </AccountDataProvider>
             </GlobalErrorProvider>
           </ModalContextProvider>

pages/get-exa.tsx

@@ -4,7 +4,7 @@ import { Box, Typography } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { GetEXAProvider } from '../contexts/GetEXAContext';
 import { usePageView } from '../hooks/useAnalytics';
-import GetEXA from '../components/getEXA';
+import GetEXA from '../components/GetEXA';
 import Link from 'next/link';
 
 const GetExaPage: NextPage = () => {

pages/strategies.tsx

@@ -22,13 +22,15 @@ import { useVELOPoolAPR } from 'hooks/useVELO';
 import { useExtraDepositAPR } from 'hooks/useExtra';
 import { useWeb3 } from 'hooks/useWeb3';
 import FeaturedStrategies from 'components/strategies/FeaturedStrategies';
+import { useModal } from '../contexts/ModalContext';
 
 const Strategies: NextPage = () => {
   usePageView('/strategies', 'Strategies');
   const { t } = useTranslation();
   const { query } = useRouter();
   const { startLeverager } = useStartLeverager();
   const { startDebtManager } = useStartDebtManagerButton();
+  const { open: openGetEXA } = useModal('get-exa');
 
   const { chain } = useWeb3();
 
@@ -227,16 +229,14 @@ const Strategies: NextPage = () => {
             { text: t('Basic'), size: 'small' as const },
           ],
           button: (
-            <Link href={{ pathname: '/get-exa', query }} style={{ width: '100%' }}>
-              <Button fullWidth variant="contained">
-                {t('Get EXA')}
-              </Button>
-            </Link>
+            <Button fullWidth variant="contained" onClick={openGetEXA}>
+              {t('Get EXA')}
+            </Button>
           ),
           isNew: true,
         },
       ].filter((s) => s.chainId === chain.id || s.chainId === undefined),
-    [chain.id, hfLabel, lowestBorrowAPR, maxYield, query, startDebtManager, startLeverager, t],
+    [chain.id, hfLabel, lowestBorrowAPR, maxYield, openGetEXA, query, startDebtManager, startLeverager, t],
   );
 
   const thirdPartyStrategies: (Strategy & { chainId?: number })[] = useMemo(

pages/vesting.tsx

@@ -3,7 +3,7 @@ import type { NextPage } from 'next';
 
 import { usePageView } from 'hooks/useAnalytics';
 import { Trans, useTranslation } from 'react-i18next';
-import { Box, Button, Divider, Grid, Link, Skeleton, Typography } from '@mui/material';
+import { Box, Button, Divider, Grid, Skeleton, Typography } from '@mui/material';
 import VestingInput from 'components/VestingInput';
 import ActiveStream from 'components/ActiveStream';
 import { useUpdateStreams, useEscrowedEXA, useEscrowedEXAReserveRatio } from 'hooks/useEscrowedEXA';
@@ -31,6 +31,7 @@ const Vesting: NextPage = () => {
 
   const { rewards } = useRewards();
   const { open: openRewards } = useModal('rewards');
+  const { open: openGetEXA } = useModal('get-exa');
 
   const unclaimedTokens = useMemo(() => {
     return rewards['esEXA']?.amount || 0n;
@@ -114,7 +115,21 @@ const Vesting: NextPage = () => {
               <Trans
                 i18nKey="You can <1>get EXA</1> if you don’t have the required reserve amount."
                 components={{
-                  1: <Link href="/get-exa" style={{ textDecoration: 'underline' }} />,
+                  1: (
+                    <button
+                      onClick={openGetEXA}
+                      style={{
+                        fontWeight: 700,
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                        padding: 'unset',
+                        background: 'unset',
+                        border: 'unset',
+                        fontSize: 'unset',
+                        color: 'unset',
+                      }}
+                    />
+                  ),
                 }}
               />
             </Typography>

utils/client.ts

@@ -83,5 +83,6 @@ createWeb3Modal({
   chains,
   themeVariables: {
     '--w3m-font-family': 'Inter',
+    '--w3m-z-index': 1201,
   },
 });