Style enhancement and adjustment of partner config filter

README.md

@@ -1,4 +1,4 @@
-# Camino Application Suite
+# Camino Suite
 
 This app uses Module Federation to combine three different applications with different frameworks into a single, cohesive application. The three applications are:
 

public/index.html

@@ -8,18 +8,16 @@
         <meta name="theme-color" content="#000000" />
         <meta
             name="description"
-            content="Explore Camino Suite for comprehensive travel solutions by Chain4Travel. Discover more about our services and how we're revolutionizing travel."
+            content="Discover Camino Suite — hub for crypto wallets, on-chain data, transactions, Camino Messenger configuration, and Partner Showroom of Camino Network."
         />
-        <title>Camino Suite Application</title>
+        <meta name="keywords" content="Camino Suite" />
+        <title>Camino Suite</title>
 
-        <meta property="og:image" content="/preview.jpg" />
-        <meta
-            property="og:title"
-            content="Camino Suite Camino Suite Application: Your Gateway to Revolutionary Travel"
-        />
+        <meta property="og:image" content="/preview.png" />
+        <meta property="og:title" content="Camino Suite: Your Gateway to Revolutionary Travel" />
         <meta
             property="og:description"
-            content="Explore Camino Suite for comprehensive travel solutions by Chain4Travel. Discover more about our services and how we're revolutionizing travel."
+            content="Discover Camino Suite — hub for crypto wallets, on-chain data, transactions, Camino Messenger configuration, and Partner Showroom of Camino Network."
         />
         <meta property="og:url" content="https://suite.camino.network/" />
         <meta property="og:type" content="website" />
@@ -33,8 +31,7 @@
             content="Camino Suite for everything Camino by Chain4Travel."
         />
         <meta name="twitter:image" content="/preview.jpg" />
-        <meta name="twitter:image:alt" content="Camino Suite Application" />
-
+        <meta name="twitter:image:alt" content="Camino Suite" />
         <link rel="preconnect" href="https://cdn.jsdelivr.net" />
         <link
             rel="stylesheet"

public/manifest.json

@@ -1,6 +1,6 @@
 {
-    "short_name": "Camino Suite Application",
-    "name": "Camino Suite Application",
+    "short_name": "Camino Suite",
+    "name": "Camino Suite",
     "icons": [
         {
             "src": "favicon.ico",

src/App.tsx

@@ -1,12 +1,12 @@
+import { ExplorerStoreProvider } from 'Explorer/useStore'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import Root from './layout/index'
 import { HelmetProvider } from 'react-helmet-async'
-import ThemeConfig from './theme'
 import { Provider as ReduxProvider } from 'react-redux'
-import { configureAppStore } from './redux/store'
 import './index.css'
-import { ExplorerStoreProvider } from 'Explorer/useStore'
+import Root from './layout/index'
+import { configureAppStore } from './redux/store'
+import ThemeConfig from './theme'
 
 export const store = configureAppStore()
 

src/components/Partners/BusinessFieldFilter.tsx

@@ -1,12 +1,11 @@
-import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
-import Select, { SelectChangeEvent } from '@mui/material/Select'
-
+import { mdiCheckCircle } from '@mdi/js'
 import Icon from '@mdi/react'
+import { Divider, Typography } from '@mui/material'
 import ListItemText from '@mui/material/ListItemText'
 import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
 import React from 'react'
-import { Typography } from '@mui/material'
-import { mdiCheckCircle } from '@mdi/js'
+import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
 
 interface BusinessFieldFilterProps {
     state: StatePartnersType
@@ -17,19 +16,25 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
     state,
     dispatchPartnersActions,
 }) => {
-    const handleChange = (event: SelectChangeEvent<typeof state.businessField>) => {
-        const {
-            target: { value },
-        } = event
-        dispatchPartnersActions({ type: partnersActions.UPDATE_BUSINESS_FIELD, payload: value[1] })
+    const handleFieldToggle = (selectedField: string) => {
+        dispatchPartnersActions({
+            type: partnersActions.UPDATE_BUSINESS_FIELD,
+            payload: selectedField,
+        })
+    }
+
+    const handleCategoryToggle = (category: string) => {
+        dispatchPartnersActions({
+            type: partnersActions.TOGGLE_CATEGORY,
+            payload: category,
+        })
     }
 
     return (
         <Select
             multiple
-            // @ts-ignore
             value={['default']}
-            onChange={handleChange}
+            onChange={() => {}}
             sx={{
                 flex: '1 1 250px',
                 padding: '0',
@@ -72,27 +77,54 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
                 },
             }}
         >
-            <MenuItem sx={{ display: 'none' }} value={'default'}>
-                <Typography variant="caption">Business fields</Typography>
-            </MenuItem>
-            {state.businessField.map((businessField, index) => (
-                <MenuItem key={index} value={businessField.name}>
-                    <ListItemText
-                        // sx={{ color: !businessField.active ? '#CBD4E2' : '#ffffff' }}
-                        primary={
-                            <Typography
-                                variant="caption"
-                                sx={{ fontWeight: !businessField.active ? 500 : 600 }}
-                            >
-                                {businessField.name}
-                            </Typography>
-                        }
-                    />
-                    {businessField.active && (
-                        <Icon path={mdiCheckCircle} size={1} color="#B5E3FD" />
-                    )}
-                </MenuItem>
-            ))}
+            {state?.businessField?.map((group, groupIndex) => [
+                <MenuItem
+                    key={`category-${groupIndex}`}
+                    onClick={() => handleCategoryToggle(group.category)}
+                    sx={{
+                        opacity: 0.48,
+                        backgroundColor: theme =>
+                            theme.palette.mode === 'dark'
+                                ? theme.palette.grey[800]
+                                : theme.palette.grey[100],
+                        py: 1,
+                    }}
+                >
+                    <Typography
+                        variant="caption"
+                        sx={{
+                            fontWeight: 600,
+                            color: theme => theme.palette.text.secondary,
+                        }}
+                    >
+                        {group.category}
+                    </Typography>
+                </MenuItem>,
+
+                ...group.fields.map((field, fieldIndex) => (
+                    <MenuItem
+                        key={`field-${groupIndex}-${fieldIndex}`}
+                        value={field.fullName}
+                        onClick={() => handleFieldToggle(field.fullName)}
+                    >
+                        <ListItemText
+                            primary={
+                                <Typography
+                                    variant="caption"
+                                    sx={{ fontWeight: field.active ? 600 : 500 }}
+                                >
+                                    {field.name}
+                                </Typography>
+                            }
+                        />
+                        {field.active && <Icon path={mdiCheckCircle} size={1} color="#B5E3FD" />}
+                    </MenuItem>
+                )),
+
+                groupIndex < state.businessField.length - 1 ? (
+                    <Divider key={`divider-${groupIndex}`} sx={{ my: 1 }} />
+                ) : null,
+            ])}
         </Select>
     )
 }

src/components/Partners/PartnerBusinessFields.tsx

@@ -1,21 +1,26 @@
-import { Box, Chip } from '@mui/material'
-import React from 'react'
+import { Box, Chip } from '@mui/material';
+import React from 'react';
+import { groupedBusinessFields } from '../../redux/services/partners';
 
 type PartnerBusinessFieldsProps = { business_fields: any; isPartnerView?: boolean }
 
 const PartnerBusinessFields = ({ business_fields, isPartnerView }: PartnerBusinessFieldsProps) => {
+    const flatFields = groupedBusinessFields(business_fields.data).flatMap(
+        category => category.fields,
+    )
+
     const content =
-        business_fields.data.length <= 2 || isPartnerView ? (
-            business_fields.data.map((elem, key) => (
+        flatFields.length <= 2 || isPartnerView ? (
+            flatFields.map((field, index) => (
                 <Chip
-                    key={key}
+                    key={index}
                     sx={{
                         backgroundColor: 'transparent',
                         border: '1px solid',
                         fontSize: '12px',
                         borderColor: theme => theme.palette.grey['700'],
                     }}
-                    label={elem.attributes.BusinessField}
+                    label={field.name}
                 />
             ))
         ) : (
@@ -27,7 +32,7 @@
                         fontSize: '12px',
                         borderColor: theme => theme.palette.grey['700'],
                     }}
-                    label={business_fields.data[0].attributes.BusinessField}
+                    label={flatFields[0].name}
                 />
                 <Chip
                     sx={{
@@ -36,10 +41,11 @@
                         borderColor: theme => theme.palette.grey['700'],
                         fontSize: '12px',
                     }}
-                    label={`+${business_fields.data.length - 1}`}
+                    label={`+${flatFields.length - 1}`}
                 />
             </>
         )
+
     return (
         <Box
             sx={{

src/components/Partners/PartnerCard.tsx

@@ -47,7 +47,7 @@ const PartnerCard: React.FC<PartnerCardProps> = ({ partner, clickable, onClick }
     useEffect(() => {
         if (pChainAddresses) {
             let partnerAddresses = pChainAddresses.find(
-                elem => elem.Network.toLowerCase() === activeNetwork?.name?.toLowerCase(),
+                elem => elem.Network?.toLowerCase() === activeNetwork?.name?.toLowerCase(),
             )
             if (partnerAddresses) chackValidatorStatus(partnerAddresses.pAddress)
         }

src/components/Partners/PartnerFlag.tsx

@@ -1,8 +1,8 @@
 import { Box, Typography } from '@mui/material'
 
+import React from 'react'
 import { CircleFlag } from 'react-circle-flags'
 import { CountryFlagAttributesType } from '../../@types/partners'
-import React from 'react'
 
 interface PartnerFlagProps {
     country: CountryFlagAttributesType
@@ -13,7 +13,7 @@ const PartnerFlag: React.FC<PartnerFlagProps> = ({
 }) => {
     return (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-            <CircleFlag countryCode={countryIdentifier.toLowerCase()} height="20" />
+            <CircleFlag countryCode={countryIdentifier?.toLowerCase()} height="20" />
             <Typography variant="caption" sx={{ color: theme => theme.palette.card.text }}>
                 {countryName}
             </Typography>

src/components/Partners/PartnersFilter.tsx

@@ -1,8 +1,12 @@
 import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
 
 import { Box, Button, Checkbox, FormControlLabel, Typography } from '@mui/material'
-import React from 'react'
+import React, { useMemo } from 'react'
+import store from 'wallet/store'
 import { REGISTER_PARTNER_URL } from '../../constants/route-paths'
+import { useAppSelector } from '../../hooks/reduxHooks'
+import { useIsPartnerQuery } from '../../redux/services/partners'
+import { getActiveNetwork } from '../../redux/slices/network'
 import BusinessFieldFilter from './BusinessFieldFilter'
 import SearchInput from './SearchInput'
 
@@ -14,6 +18,22 @@ interface PartnersFilterProps {
 const PartnersFilter: React.FC<PartnersFilterProps> = ({ state, dispatchPartnersActions }) => {
     const searchByName = param =>
         dispatchPartnersActions({ type: partnersActions.UPDATE_COMPANY_NAME, payload: param })
+
+    const activeNetwork = useAppSelector(getActiveNetwork)
+    const { data } = useIsPartnerQuery({
+        cChainAddress: store?.state?.activeWallet?.ethAddress
+            ? '0x' + store?.state?.activeWallet?.ethAddress
+            : '',
+    })
+    const partnerCChainAddress = useMemo(() => {
+        let cAddress = data?.attributes?.cChainAddresses.find(
+            elem => elem.Network === activeNetwork?.name?.toLowerCase(),
+        )
+        if (cAddress) return cAddress
+        return ''
+    }, [data])
+    const auth = useAppSelector(state => state.appConfig.isAuth)
+
     return (
         <Box
             sx={{
@@ -76,28 +96,30 @@ const PartnersFilter: React.FC<PartnersFilterProps> = ({ state, dispatchPartners
                     />
                 </Box>
             </Box>
-            <Box
-                sx={{
-                    flex: '1',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'flex-start',
-                }}
-            >
-                <Button
-                    variant="contained"
-                    component="a"
-                    href={REGISTER_PARTNER_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
+            {(!auth || !partnerCChainAddress) && (
+                <Box
                     sx={{
-                        whiteSpace: 'nowrap',
-                        minWidth: 'max-content',
+                        flex: '1',
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'flex-start',
                     }}
                 >
-                    Register as Partner
-                </Button>
-            </Box>
+                    <Button
+                        variant="contained"
+                        component="a"
+                        href={REGISTER_PARTNER_URL}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        sx={{
+                            whiteSpace: 'nowrap',
+                            minWidth: 'max-content',
+                        }}
+                    >
+                        Register as Partner
+                    </Button>
+                </Box>
+            )}
         </Box>
     )
 }

src/components/Partners/UpdatedSelectComponent.tsx

@@ -90,7 +90,7 @@ const UpdatedSelectComponent = React.memo(
                 )}
                 filterOptions={(options, { inputValue }) =>
                     options.filter(option =>
-                        option.toLowerCase().includes(inputValue.toLowerCase()),
+                        option?.toLowerCase().includes(inputValue.toLowerCase()),
                     )
                 }
                 groupBy={option => option.split('.')[2]}

src/constants/apps-consts.ts

@@ -64,6 +64,23 @@ export const BUSINESS_FIELDS = [
     'Climate Technology',
 ]
 
+export const ERC20_ABI = [
+    'function name() view returns (string)',
+    'function symbol() view returns (string)',
+    'function decimals() view returns (uint8)',
+    'function totalSupply() view returns (uint256)',
+    'function balanceOf(address) view returns (uint256)',
+]
+export const ERC20_BALANCE_ABI = [
+    {
+        constant: true,
+        inputs: [{ name: '_owner', type: 'address' }],
+        name: 'balanceOf',
+        outputs: [{ name: 'balance', type: 'uint256' }],
+        type: 'function',
+    },
+]
+
 export const CONTRACTCMACCOUNTMANAGERADDRESSCOLUMBUS = '0xE5B2f76C778D082b07BDd7D51FFe83E3E055B47F'
 
 export const CONTRACTCMACCOUNTMANAGERADDRESSCAMINO = '0xf9FE1eaAB73a2902136FE7A83E0703338D3b9F1e'