feat manage restricted offers whitelisting

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

@@ -1,25 +1,26 @@
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'
 import React, { useEffect, useState } from 'react'
+import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'
 
+import { useDispatch } from 'react-redux'
+import { useLocation } from 'react-router-dom'
+import { useAppSelector } from '../hooks/reduxHooks'
+import { changeActiveApp } from '../redux/slices/app-config'
+import { getActiveNetwork } from '../redux/slices/network'
 import AccessLayout from '../views/access'
+import MountAccessComponent from '../views/access/MountAccessComponent'
 import Create from '../views/create/Create'
-import CreateDepositsLayout from './CreateDepositLayout'
 import ExplorerApp from '../views/explorer/ExplorerApp'
 import LandingPage from '../views/landing/LandingPage'
 import Legal from '../views/legal/Legal'
 import LoginPage from '../views/login/LoginPage'
-import MountAccessComponent from '../views/access/MountAccessComponent'
-import MultisigWallet from '../views/settings/MultisigWallet'
 import Partners from '../views/partners'
-import Protected from './Protected'
+import CreatedOffers from '../views/partners/CreatedOffers'
+import MultisigWallet from '../views/settings/MultisigWallet'
 import Settings from '../views/settings/index'
-import SettingsLayout from './SettingsLayout'
 import Wallet from '../views/wallet/WalletApp'
-import { changeActiveApp } from '../redux/slices/app-config'
-import { getActiveNetwork } from '../redux/slices/network'
-import { useAppSelector } from '../hooks/reduxHooks'
-import { useDispatch } from 'react-redux'
-import { useLocation } from 'react-router-dom'
+import CreateDepositsLayout from './CreateDepositLayout'
+import Protected from './Protected'
+import SettingsLayout from './SettingsLayout'
 
 export default function RoutesSuite() {
     const dispatch = useDispatch()
@@ -98,6 +99,7 @@ export default function RoutesSuite() {
                     </Route>
                     <Route path="/foundation" element={<CreateDepositsLayout />}>
                         <Route index element={<Partners />} />
+                        <Route path="whitelisting" element={<CreatedOffers />} />
                     </Route>
                 </Route>
                 <Route path="/login" element={<LoginPage />} />

src/views/partners/CreatedOffers.tsx

@@ -0,0 +1,44 @@
+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 (
+        <div
+            style={{
+                width: '100%',
+                height: '100%',
+                padding: '32px',
+                paddingLeft: '0',
+                marginTop: '2.5rem',
+                maxWidth: '1536px',
+            }}
+        >
+            <div ref={ref} />
+        </div>
+    )
+}
+
+export default function CreatedOffers() {
+    return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <LoadCreateOfferForm />
+        </React.Suspense>
+    )
+}