Merge pull request #402 from skalenetwork/fix-minor-bugs

Fix swell message margin
skalenetwork · Oct 28, 2024 · 2db8bee · 2db8bee
2 parents d07d05e + 5ac45cc
commit 2db8bee
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 86 deletions.
diff --git a/src/components/profile/EmailSection.tsx b/src/components/profile/EmailSection.tsx
@@ -37,6 +37,7 @@ interface EmailSectionProps {
   handleStartEditing: () => void
   handleUpdateEmail: () => void
   handleCancelEditing: () => void
+  className?: string
 }
 
 const EmailSection: React.FC<EmailSectionProps> = ({
@@ -48,7 +49,8 @@ const EmailSection: React.FC<EmailSectionProps> = ({
   setNewEmail,
   handleStartEditing,
   handleUpdateEmail,
-  handleCancelEditing
+  handleCancelEditing,
+  className
 }) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -61,7 +63,7 @@ const EmailSection: React.FC<EmailSectionProps> = ({
   return (
     <Tile
       text="Email Address"
-      className={cls(styles.inputAmount)}
+      className={cls(styles.inputAmount, className)}
       icon={<EmailRoundedIcon />}
       value={!isEditing ? email ?? 'Not set' : undefined}
       children={

diff --git a/src/components/profile/ProfileModal.tsx b/src/components/profile/ProfileModal.tsx
@@ -22,8 +22,8 @@
  */
 
 import React, { useState, useCallback } from 'react'
-import { Modal, Box, Grid, useTheme, useMediaQuery } from '@mui/material'
-import { SkPaper, useWagmiAccount } from '@skalenetwork/metaport'
+import { Modal, Box, useTheme, useMediaQuery } from '@mui/material'
+import { cls, cmn, SkPaper, useWagmiAccount } from '@skalenetwork/metaport'
 import { useAuth } from '../../AuthContext'
 import Tile from '../Tile'
 import Message from '../Message'
@@ -77,61 +77,61 @@ const ProfileModal: React.FC = () => {
     <Box className="profileModal">
       <SkPaper gray>
         <ProfileModalHeader address={address} isSignedIn={isSignedIn} />
-
         {!address || !isSignedIn ? (
           <ConnectWallet customText="Connect your wallet and sign-in to use your profile" />
         ) : (
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <Tile
-                text="Wallet Address"
-                value={address}
-                icon={<Jazzicon diameter={20} seed={jsNumberForAddress(address)} />}
-                copy={address}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <EmailSection
-                email={email}
-                isEditing={isEditing}
-                isEmailLoading={isEmailLoading}
-                isEmailUpdating={isEmailUpdating}
-                newEmail={newEmail}
-                setNewEmail={setNewEmail}
-                handleStartEditing={handleStartEditing}
-                handleUpdateEmail={handleUpdateEmail}
-                handleCancelEditing={handleCancelEditing}
-              />
-            </Grid>
+          <div></div>
+        )}
+        {address && isSignedIn ? (
+          <div>
+            <Tile
+              text="Wallet Address"
+              value={address}
+              icon={<Jazzicon diameter={20} seed={jsNumberForAddress(address)} />}
+              copy={address}
+              className={cls(cmn.mbott10)}
+            />
+            <EmailSection
+              email={email}
+              isEditing={isEditing}
+              isEmailLoading={isEmailLoading}
+              isEmailUpdating={isEmailUpdating}
+              newEmail={newEmail}
+              setNewEmail={setNewEmail}
+              handleStartEditing={handleStartEditing}
+              handleUpdateEmail={handleUpdateEmail}
+              handleCancelEditing={handleCancelEditing}
+              className={cls(cmn.mbott10)}
+            />
             {emailError && (
-              <Grid item xs={12}>
-                <Message
-                  text={emailError}
-                  type="error"
-                  icon={<EmailRoundedIcon />}
-                  closable={false}
-                />
-              </Grid>
-            )}
-
-            <Grid item xs={12}>
-              <SwellMessage
-                email={email}
-                isEditing={isEditing}
-                handleStartEditing={handleStartEditing}
+              <Message
+                text={emailError}
+                type="error"
+                icon={<EmailRoundedIcon />}
+                closable={false}
+                className={cls(cmn.mbott10)}
               />
-            </Grid>
-
-            <Grid item xs={12}>
-              <ProfileModalActions
-                address={address}
-                isSignedIn={isSignedIn}
-                isMobile={isMobile}
-                handleSignIn={handleSignIn}
-                handleSignOut={handleSignOut}
-              />
-            </Grid>
-          </Grid>
+            )}
+            <SwellMessage
+              email={email}
+              isEditing={isEditing}
+              handleStartEditing={handleStartEditing}
+            />
+          </div>
+        ) : (
+          <div></div>
+        )}
+        {address ? (
+          <ProfileModalActions
+            className={cls(cmn.mtop20)}
+            address={address}
+            isSignedIn={isSignedIn}
+            isMobile={isMobile}
+            handleSignIn={handleSignIn}
+            handleSignOut={handleSignOut}
+          />
+        ) : (
+          <div></div>
         )}
       </SkPaper>
     </Box>

diff --git a/src/components/profile/ProfileModalActions.tsx b/src/components/profile/ProfileModalActions.tsx
@@ -36,16 +36,18 @@ interface ProfileModalActionsProps {
   isMobile: boolean
   handleSignIn: () => void
   handleSignOut: () => void
+  className?: string
 }
 
 const ProfileModalActions: React.FC<ProfileModalActionsProps> = ({
   address,
   isSignedIn,
   isMobile,
   handleSignIn,
-  handleSignOut
+  handleSignOut,
+  className
 }) => (
-  <SkStack className="profileModalActions">
+  <SkStack className={cls(className, 'profileModalActions')}>
     <Button
       variant="text"
       startIcon={<LaunchIcon />}
@@ -70,15 +72,17 @@ const ProfileModalActions: React.FC<ProfileModalActionsProps> = ({
       )}
     </RainbowConnectButton.Custom>
 
-    <Button
-      variant="text"
-      startIcon={isSignedIn ? <LogoutIcon /> : <LoginIcon />}
-      className={cls('btn', 'btnSm', 'filled')}
-      onClick={isSignedIn ? handleSignOut : handleSignIn}
-      fullWidth={isMobile}
-    >
-      {isSignedIn ? 'Sign Out' : 'Sign In'}
-    </Button>
+    {isSignedIn && (
+      <Button
+        variant="text"
+        startIcon={isSignedIn ? <LogoutIcon /> : <LoginIcon />}
+        className={cls('btn', 'btnSm', 'filled')}
+        onClick={isSignedIn ? handleSignOut : handleSignIn}
+        fullWidth={isMobile}
+      >
+        Sign Out
+      </Button>
+    )}
   </SkStack>
 )
 

diff --git a/src/pages/Ecosystem.tsx b/src/pages/Ecosystem.tsx
@@ -44,7 +44,6 @@ import SkStack from '../components/SkStack'
 import AllApps from '../components/ecosystem/tabs/AllApps'
 import NewApps from '../components/ecosystem/tabs/NewApps'
 import FavoriteApps from '../components/ecosystem/tabs/FavoriteApps'
-import MostLiked from '../components/ecosystem/tabs/MostLiked'
 import TrendingApps from '../components/ecosystem/tabs/TrendingApps'
 import SocialButtons from '../components/ecosystem/Socials'
 import SkPageInfoIcon from '../components/SkPageInfoIcon'
@@ -59,7 +58,7 @@ export default function Ecosystem(props: {
 }) {
   const { getCheckedItemsFromUrl, setCheckedItemsInUrl, getTabIndexFromUrl, setTabIndexInUrl } =
     useUrlParams()
-  const { allApps, newApps, mostLikedApps, trendingApps, favoriteApps, isSignedIn } = useApps(
+  const { allApps, newApps, trendingApps, favoriteApps, isSignedIn } = useApps(
     props.chainsMeta,
     props.metrics
   )
@@ -131,10 +130,12 @@ export default function Ecosystem(props: {
     ])
 
     return (tabIndex: number) => filterMap.get(tabIndex) || filteredApps
-  }, [filteredApps, newApps, trendingApps, mostLikedApps, favoriteApps, isSignedIn])
+  }, [filteredApps, newApps, trendingApps, favoriteApps, isSignedIn])
 
   const currentFilteredApps = getFilteredAppsByTab(activeTab)
 
+  const isFiltersApplied = Object.keys(checkedItems).length !== 0
+
   return (
     <Container maxWidth="md">
       <Helmet>
@@ -176,18 +177,15 @@ export default function Ecosystem(props: {
             setCheckedItems={handleSetCheckedItems}
             filteredAppsCount={currentFilteredApps.length}
           />
-          <SwellMessage className={cmn.mbott20} />
+          <SwellMessage
+            className={cls([cmn.mtop20, isFiltersApplied], [cmn.mbott20, !isFiltersApplied])}
+          />
           <Tabs
             variant={props.isXs ? 'scrollable' : 'standard'}
             value={activeTab}
             onChange={handleTabChange}
             scrollButtons="auto"
-            className={cls(
-              cmn.mbott20,
-              [cmn.mtop20, Object.keys(checkedItems).length !== 0],
-              'skTabs',
-              'fwmobile'
-            )}
+            className={cls(cmn.mbott20, [cmn.mtop20, isFiltersApplied], 'skTabs', 'fwmobile')}
           >
             <Tab
               label="All"
@@ -242,15 +240,6 @@ export default function Ecosystem(props: {
             />
           )}
           {activeTab === 3 && (
-            <MostLiked
-              chainsMeta={props.chainsMeta}
-              skaleNetwork={props.mpc.config.skaleNetwork}
-              newApps={newApps}
-              filteredApps={currentFilteredApps}
-              trendingApps={trendingApps}
-            />
-          )}
-          {activeTab === 4 && (
             <FavoriteApps
               chainsMeta={props.chainsMeta}
               skaleNetwork={props.mpc.config.skaleNetwork}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -75,7 +75,7 @@ export default function Home({
         <AppSection
           title="Your Favorites"
           icon={SECTION_ICONS.favorites}
-          linkTo="/ecosystem?tab=2"
+          linkTo="/ecosystem?tab=3"
           component={
             <FavoriteApps
               skaleNetwork={skaleNetwork}
@@ -111,7 +111,7 @@ export default function Home({
         <AppSection
           title="Trending dApps on SKALE"
           icon={SECTION_ICONS.trending}
-          linkTo="/ecosystem?tab=3"
+          linkTo="/ecosystem?tab=2"
           component={
             <TrendingApps
               chainsMeta={chainsMeta}