Merge remote-tracking branch 'origin/suite' into feat-partners-showroom

src/layout/CreateDepositLayout.tsx

@@ -1,10 +1,8 @@
-import React, { useState } from 'react'
-import { Outlet } from 'react-router'
-import { Box, Toolbar } from '@mui/material'
-import Tabs from '@mui/material/Tabs'
+import { Box, Toolbar, Typography } from '@mui/material'
 import Tab from '@mui/material/Tab'
-import { useNavigate } from 'react-router'
-import { Typography } from '@mui/material'
+import Tabs from '@mui/material/Tabs'
+import React, { useState } from 'react'
+import { Outlet, useNavigate } from 'react-router'
 
 function a11yProps(index: number) {
     return {
@@ -52,7 +50,7 @@ const Links = () => {
                             Create new depositOffer
                         </Typography>
                     }
-                    onClick={() => navigate('/settings')}
+                    onClick={() => navigate('/foundation')}
                     {...a11yProps(0)}
                     sx={{
                         display: 'flex',
@@ -73,6 +71,44 @@ const Links = () => {
                         },
                     }}
                 />
+                <Tab
+                    className="tab"
+                    disableRipple
+                    label={
+                        <Typography
+                            sx={{
+                                fontFamily: 'Inter',
+                                fontSize: '14px',
+                                fontStyle: 'normal',
+                                fontWeight: '600',
+                                lineHeight: '20px',
+                                color: theme => theme.palette.text.primary,
+                            }}
+                        >
+                            Edit Whitelisting
+                        </Typography>
+                    }
+                    onClick={() => navigate('whitelisting')}
+                    {...a11yProps(1)}
+                    sx={{
+                        display: 'flex',
+                        padding: '10px 12px',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        position: 'relative',
+                        height: '61px',
+                        '&::after': {
+                            content: '""',
+                            display: value === 1 ? 'block' : 'none',
+                            width: '100%',
+                            height: '4px',
+                            position: 'absolute',
+                            bottom: '0px',
+                            borderRadius: '4px 4px 0px 0px',
+                            background: '#0085FF',
+                        },
+                    }}
+                />
             </Tabs>
         </Box>
     )

src/layout/RoutesSuite.tsx

@@ -14,6 +14,7 @@ import LandingPage from '../views/landing/LandingPage'
 import Legal from '../views/legal/Legal'
 import LoginPage from '../views/login/LoginPage'
 import Partners from '../views/partners'
+import CreatedOffers from '../views/partners/CreatedOffers'
 import Foundation from '../views/partners/Foundation'
 import MultisigWallet from '../views/settings/MultisigWallet'
 import Settings from '../views/settings/index'
@@ -101,6 +102,7 @@ export default function RoutesSuite() {
                     </Route>
                     <Route path="/foundation" element={<CreateDepositsLayout />}>
                         <Route index element={<Foundation />} />
+                        <Route path="whitelisting" element={<CreatedOffers />} />
                     </Route>
                 </Route>
                 <Route path="/partners" element={<PartnersLayout />}>

src/theme/index.tsx

@@ -5,7 +5,7 @@ import {
     ThemeProvider,
     createTheme,
 } from '@mui/material/styles'
-import React, { ReactNode, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { useAppSelector } from '../hooks/reduxHooks'
 import { getTheme } from '../redux/slices/theme'
 import breakpoints from './breakpoints'
@@ -15,6 +15,8 @@ import shadows, { CustomShadowOptions, customShadows } from './shadows'
 import shape from './shape'
 import typography from './typography'
 
+import React from 'react'
+
 type ThemeConfigProps = {
     children: ReactNode
 }

src/views/partners/CreatedOffers.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@mui/material'
+import React, { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router'
+import { mountCreateOfferForm } from 'wallet/mountCreateOfferForm'
+import { useAppDispatch } from '../../hooks/reduxHooks'
+import { changeActiveApp } from '../../redux/slices/app-config'
+
+const LoadCreateOfferForm = () => {
+    const ref = useRef(null)
+    const dispatch = useAppDispatch()
+    const navigate = useNavigate()
+    useEffect(() => {
+        mountCreateOfferForm(ref.current, {
+            isSuite: true,
+            navigate: location => {
+                dispatch(changeActiveApp('Network'))
+                navigate(location)
+            },
+            isWhiteListing: true,
+        })
+    }, [])
+
+    return (
+        <Box
+            sx={{
+                width: '100%',
+                height: '100%',
+                paddingY: '32px',
+                marginTop: '2.5rem',
+                maxWidth: '1536px',
+            }}
+        >
+            <div ref={ref} />
+        </Box>
+    )
+}
+
+export default function CreatedOffers() {
+    return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <LoadCreateOfferForm />
+        </React.Suspense>
+    )
+}