Merge branch 'dev' into staging

open-dollar · Jul 4, 2024 · 1b70627 · 1b70627
2 parents a3fb7ec + a3e6ebb
commit 1b70627
Show file tree

Hide file tree

Showing 16 changed files with 1,397 additions and 1,272 deletions.
diff --git a/public/index.html b/public/index.html
@@ -38,13 +38,30 @@
         <meta name="description" content="Open Dollar is a stablecoin protocol built on Arbitrum designed to help you yield and leverage your assets with safety and predictability." />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
         <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap" rel="stylesheet">
+
+        <!-- Preconnect and Preload -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" as="style">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" as="style">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" as="style">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" as="style">
+        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" as="style">
+
+        <!-- Load fonts asynchronously -->
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+
         <title>OD | App</title>
 
         <!-- Matomo -->
-        <script src="./tracking.js"></script>
+        <script src="./tracking.js" defer></script>
         <script src="https://usekeyp.matomo.cloud/matomo.js" async defer></script>
         <!-- End Matomo Code -->
-        <script type="text/javascript" src="https://kb.wowto.ai/widgets/M4cmuZpuJqb/widget.js"></script>
+        <script type="text/javascript" src="https://kb.wowto.ai/widgets/M4cmuZpuJqb/widget.js" async defer></script>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/squares1x.png b/public/squares1x.png
diff --git a/public/squares1x.webp b/public/squares1x.webp
diff --git a/public/wavy-blue.png b/public/wavy-blue.png
diff --git a/public/wavy-blue.webp b/public/wavy-blue.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, lazy, Suspense } from 'react'
 import i18next from 'i18next'
-import { Suspense } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
@@ -20,7 +19,6 @@ import GoogleTagManager from './components/Analytics/GoogleTagManager'
 import CreateVault from './containers/Vaults/CreateVault'
 import Auctions from './containers/Auctions'
 import Analytics from './containers/Analytics'
-import { ToastContainer } from 'react-toastify'
 import PageNotFound from '~/containers/PageNotFound'
 import Maintenance from '~/containers/Maintenance'
 import MaintenanceRedirect from '~/containers/MaintenanceRedirect'
@@ -31,6 +29,10 @@ import Bolts from './containers/Bolts'
 import { Fuul } from '@fuul/sdk'
 import EarnDetails from './containers/Earn/EarnDetails'
 import Marketplace from './containers/Marketplace'
+import ScreenLoader from '~/components/Modals/ScreenLoader'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+const ToastContainer = lazy(() => import('react-toastify').then((module) => ({ default: module.ToastContainer })))
 
 Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,
@@ -77,11 +79,13 @@ const App = () => {
             <ThemeProvider theme={lightTheme}>
                 <GlobalStyle />
                 <ErrorBoundary>
-                    <ToastContainer style={{ zIndex: 1001, position: 'sticky', top: 0, left: 0, width: '100%' }} />
-                    <Shared>
-                        <ApolloProvider client={client}>
-                            <StatsProvider>
-                                <Suspense fallback={null}>
+                    <Suspense fallback={<ScreenLoader />}>
+                        <Shared>
+                            <ApolloProvider client={client}>
+                                <StatsProvider>
+                                    <ToastContainer
+                                        style={{ zIndex: 1001, position: 'sticky', top: 0, left: 0, width: '100%' }}
+                                    />
                                     <Route component={GoogleTagManager} />
                                     <Web3ReactManager>
                                         <MaintenanceRedirect>
@@ -123,10 +127,10 @@ const App = () => {
                                             </Switch>
                                         </MaintenanceRedirect>
                                     </Web3ReactManager>
-                                </Suspense>
-                            </StatsProvider>
-                        </ApolloProvider>
-                    </Shared>
+                                </StatsProvider>
+                            </ApolloProvider>
+                        </Shared>
+                    </Suspense>
                 </ErrorBoundary>
             </ThemeProvider>
         </I18nextProvider>

diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -24,7 +24,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     color: ${(props: any) => props.theme.colors.primary};
     background-color:${(props: any) => props.theme.colors.background};
-    background-image: url('squares1x.png'), url('wavy-blue.png');
+    background-image: url('/squares1x.webp'), url('/wavy-blue.webp');
     background-size: contain, 100%;
     background-position: bottom left, top right;
     background-repeat: no-repeat;

diff --git a/src/assets/closed-vault.webp b/src/assets/closed-vault.webp
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
@@ -13,6 +13,11 @@ const CookieBanner = () => {
                         background: 'linear-gradient(180deg, #1A74EC 0%, #6396FF 100%',
                         alignItems: 'center',
                         boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        width: '100%',
+                        zIndex: 1000,
                     }}
                 >
                     <CookiesText>

diff --git a/src/components/StepsContent.tsx b/src/components/StepsContent.tsx
@@ -1,5 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { useState } from 'react'
 import Button from './Button'
 import closedVault from '../assets/closed-vault.webp'
 import wallet from '../assets/wallet.webp'
@@ -26,27 +29,38 @@ const StepsContent = ({ title, text, stepNumber, btnText, handleClick, isDisable
         { title: 'Step 3', text: 'Create a Vault' },
     ]
 
-    const returnLottie = (step: number) => {
-        switch (step) {
-            case 0:
-                return <img src={closedVault} alt="" />
-            case 1:
-                return <img src={wallet} alt="" />
-            case 2:
-                return <img src={vaultFacilitator} alt="" />
-            case 3:
-                return <img src={openedVault} alt="" />
-            default:
-                return <img src={closedVault} alt="" />
+    const useReturnLottie = (step: number) => {
+        const [loaded, setLoaded] = useState(false)
+
+        const handleImageLoad = () => {
+            setLoaded(true)
         }
+
+        const imageSrc = [closedVault, wallet, vaultFacilitator, openedVault][step] || closedVault
+
+        return (
+            <>
+                {!loaded && <Skeleton baseColor={'rgb(220 241 255)'} width="100%" height="330px" />}
+                <img
+                    src={imageSrc}
+                    alt=""
+                    width="100%"
+                    height="330px"
+                    loading="lazy"
+                    onLoad={handleImageLoad}
+                    style={{ display: loaded ? 'block' : 'none' }}
+                />
+            </>
+        )
     }
+
     return (
         <Container id={id}>
             <StepperWrapper stepNumber={stepNumber}>
                 <Stepper step={stepNumber} steps={steps} />
             </StepperWrapper>
             <ContentContainer stepNumber={stepNumber}>
-                <ImageContainer stepNumber={stepNumber}>{returnLottie(stepNumber)}</ImageContainer>
+                <ImageContainer stepNumber={stepNumber}>{useReturnLottie(stepNumber)}</ImageContainer>
                 <ContentWrapper stepNumber={stepNumber}>
                     <Title>{t(title)}</Title>
                     <Text>{t(text)}</Text>
@@ -78,6 +92,7 @@ const Container = styled.div`
 const ImageContainer = styled.div<{ stepNumber: number }>`
     margin-right: ${(props) => (props.stepNumber === 0 ? '' : '30px')};
     max-width: ${(props) => (props.stepNumber === 0 ? '358px' : '319px')};
+    width: 358px;
 
     @media (max-width: 960px) {
         margin-right: 0;

diff --git a/src/containers/Earn/PoolBlock.tsx b/src/containers/Earn/PoolBlock.tsx
@@ -62,7 +62,6 @@ export default PoolBlock
 
 const BlockContainer = styled.div`
     border-radius: 4px;
-    margin-bottom: 29px;
     background: white;
     box-shadow: 0px 4px 6px 0px #0d4b9d33;
     position: relative;
@@ -71,6 +70,9 @@ const BlockContainer = styled.div`
     &.empty {
         background: white;
     }
+    &:not(:last-child) {
+        margin-bottom: 29px;
+    }
 `
 
 const BlockHeader = styled.div`

diff --git a/src/containers/Earn/index.tsx b/src/containers/Earn/index.tsx
@@ -3,13 +3,13 @@ import { useStoreActions, useStoreState } from '~/store'
 import { useActiveWeb3React } from '~/hooks'
 import { useEffect, useMemo, useState } from 'react'
 import useGeb from '~/hooks/useGeb'
-import Loader from '~/components/Loader'
 import Button from '~/components/Button'
 import { ExternalLink } from 'react-feather'
 import { POOLS } from '~/utils'
 import PoolBlock from './PoolBlock'
 import { JSX } from 'react/jsx-runtime'
 import { PoolData } from '@opendollar/sdk'
+import Skeleton from 'react-loading-skeleton'
 
 interface Cache {
     [key: string]: PoolData
@@ -91,9 +91,16 @@ const Earn = () => {
                         ) => <PoolBlock {...pool} nitroPoolData={nitroPools[i]} key={`${pool.nitroPoolAddress}-pool`} />
                     )
                 ) : (
-                    <Loader width="50px" color="#1A74EC" />
+                    <Skeleton
+                        height={185}
+                        count={3}
+                        baseColor={'#89B3FB'}
+                        highlightColor="#2871FD"
+                        style={{ marginBottom: '30px' }}
+                    />
                 )}
             </Pools>
+
             <BtnWrapper>
                 <Button data-test-id="steps-btn" id={'suggest-pool-btn'} secondary onClick={handleClick}>
                     suggest a new pool <ExternalLink />
@@ -157,7 +164,9 @@ const PoolsHeader = styled.h2`
     margin-bottom: 20px;
 `
 
-const Pools = styled.div``
+const Pools = styled.div`
+    margin-bottom: 30px;
+`
 
 const BtnWrapper = styled.div`
     width: max-content;