From 9f8e239ad00fd04dd96abb9ab680385386be7869 Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Thu, 22 Aug 2024 18:18:42 +0100
Subject: [PATCH] Fix auth logic, update swell icon, add sign-in/sign-out
 button

---
 src/App.scss                                  | 10 +++
 src/components/AccountMenu.tsx                | 55 ++++++++++---
 .../ecosystem/FavoriteIconButton.tsx          | 26 +++---
 src/components/ecosystem/Socials.tsx          |  8 +-
 src/components/ecosystem/SwellIcon.tsx        | 79 +++++++++++++++++++
 src/core/constants.ts                         |  2 +
 src/pages/App.tsx                             | 27 ++++++-
 7 files changed, 174 insertions(+), 33 deletions(-)
 create mode 100644 src/components/ecosystem/SwellIcon.tsx

diff --git a/src/App.scss b/src/App.scss
index 1e2baa3..3a7c5ae 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -73,6 +73,8 @@ body {
 }
 
 .mp__btnConnect {
+  position: relative;
+
   width: 100%;
   border-radius: 18px !important;
 
@@ -106,6 +108,12 @@ body {
   .mp__iconGray {
     width: 12pt;
   }
+
+  .icon-overlay {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+  }
 }
 
 .MuiDrawer-paper {
@@ -759,6 +767,7 @@ input[type=number] {
 
 .chipPreTge {
   background: linear-gradient(180deg, #EBB84F, #bc923b) !important;
+
   p {
     color: black !important
   }
@@ -917,6 +926,7 @@ input[type=number] {
 
 .iconRed {
   color: #da3a34 !important;
+
   svg {
     color: #da3a34 !important;
   }
diff --git a/src/components/AccountMenu.tsx b/src/components/AccountMenu.tsx
index d37f4cc..21bb384 100644
--- a/src/components/AccountMenu.tsx
+++ b/src/components/AccountMenu.tsx
@@ -22,7 +22,6 @@
  */
 
 import { useState, type MouseEvent } from 'react'
-import { Link } from 'react-router-dom'
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 
 import Box from '@mui/material/Box'
@@ -32,14 +31,19 @@ import Tooltip from '@mui/material/Tooltip'
 import Button from '@mui/material/Button'
 
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import HistoryIcon from '@mui/icons-material/History'
 import SignalCellularAltOutlinedIcon from '@mui/icons-material/SignalCellularAltOutlined'
 import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'
 import LooksRoundedIcon from '@mui/icons-material/LooksRounded'
+import LoginOutlinedIcon from '@mui/icons-material/LoginOutlined'
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'
+import FiberManualRecordRoundedIcon from '@mui/icons-material/FiberManualRecordRounded'
 
 import { cls, styles, cmn, RainbowConnectButton } from '@skalenetwork/metaport'
 
+import { useAuth } from '../AuthContext'
+
 export default function AccountMenu(props: any) {
+  const { isSignedIn, handleSignIn, handleSignOut } = useAuth()
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
   const handleClick = (event: MouseEvent<HTMLElement>) => {
@@ -76,13 +80,32 @@ export default function AccountMenu(props: any) {
             </div>
           </Tooltip>
         ) : (
-          <Tooltip arrow title="Account info">
+          <Tooltip
+            arrow
+            title={isSignedIn ? 'Conneced and signed-in' : 'Wallet connect, signed-out'}
+          >
             <Button
               onClick={handleClick}
               className={cls('mp__btnConnect', styles.paperGrey, cmn.pPrim, cmn.flex)}
             >
-              <div className={cls(cmn.mri10, cmn.flexcv)} style={{ height: '20px' }}>
+              <div
+                className={cls(cmn.mri5, cmn.flexcv)}
+                style={{ height: '20px', position: 'relative' }}
+              >
                 <Jazzicon diameter={20} seed={jsNumberForAddress(props.address)} />
+                <div className={cls('icon-overlay', cmn.flex, cmn.flexcv)}>
+                  {isSignedIn ? (
+                    <FiberManualRecordRoundedIcon
+                      color="success"
+                      className={cls(styles.chainIconxs)}
+                    />
+                  ) : (
+                    <FiberManualRecordRoundedIcon
+                      color="warning"
+                      className={cls(styles.chainIconxs)}
+                    />
+                  )}
+                </div>
               </div>
               {props.address.substring(0, 5) +
                 '...' +
@@ -141,11 +164,6 @@ export default function AccountMenu(props: any) {
             )
           }}
         </RainbowConnectButton.Custom>
-        <Link to="/bridge/history" className="undec fullW">
-          <MenuItem onClick={handleClose}>
-            <HistoryIcon className={cmn.mri10} /> Transfers history
-          </MenuItem>
-        </Link>
         <a
           className="undec fullW"
           target="_blank"
@@ -162,6 +180,25 @@ export default function AccountMenu(props: any) {
             </div>
           </MenuItem>
         </a>
+        <MenuItem
+          onClick={() => {
+            if (isSignedIn) {
+              handleSignOut()
+            } else {
+              handleSignIn()
+            }
+            handleClose()
+          }}
+        >
+          <div className={cmn.flex}>
+            {isSignedIn ? (
+              <LogoutOutlinedIcon className={cmn.mri10} />
+            ) : (
+              <LoginOutlinedIcon className={cmn.mri10} />
+            )}
+          </div>
+          <div className={cls(cmn.flex, cmn.flexg)}>Sign {isSignedIn ? 'out' : 'in'}</div>
+        </MenuItem>
       </Menu>
     </div>
   )
diff --git a/src/components/ecosystem/FavoriteIconButton.tsx b/src/components/ecosystem/FavoriteIconButton.tsx
index d10aacd..df0a47c 100644
--- a/src/components/ecosystem/FavoriteIconButton.tsx
+++ b/src/components/ecosystem/FavoriteIconButton.tsx
@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2024-Present
  */
 
-import React, { useEffect } from 'react'
+import React from 'react'
 import { IconButton, Tooltip } from '@mui/material'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
@@ -36,36 +36,32 @@ interface FavoriteIconButtonProps {
 
 const FavoriteIconButton: React.FC<FavoriteIconButtonProps> = ({ chainName, appName }) => {
   const { likedApps, toggleLikedApp, refreshLikedApps, getAppId } = useLikedApps()
-  const { isSignedIn, handleSignIn, getSignInStatus } = useAuth()
+  const { isSignedIn, handleSignIn } = useAuth()
   const { address } = useWagmiAccount()
   const { openConnectModal } = useConnectModal()
   const appId = getAppId(chainName, appName)
   const isLiked = likedApps.includes(appId)
 
-  const [asyncLike, setAsyncLike] = React.useState(false)
-
   const handleToggleLike = async () => {
-    const status = await getSignInStatus()
-    if (!status && address) handleSignIn()
-    setAsyncLike(true)
-  }
-
-  const handleAsyncLike = async () => {
     if (!address) {
       openConnectModal?.()
       return
     }
-    setAsyncLike(false)
+    if (!isSignedIn) {
+      await handleSignIn()
+      return
+    }
     await toggleLikedApp(appId)
     refreshLikedApps()
   }
 
-  useEffect(() => {
-    if (asyncLike) handleAsyncLike()
-  }, [address, isSignedIn, asyncLike])
+  const getTooltipTitle = () => {
+    if (!isSignedIn) return 'Sign in to add to favorites'
+    return isLiked ? 'Remove from favorites' : 'Add to favorites'
+  }
 
   return (
-    <Tooltip title={isLiked ? 'Remove from favorites' : 'Add to favorites'}>
+    <Tooltip title={getTooltipTitle()}>
       <IconButton onClick={handleToggleLike} className={cls('bgPrim')}>
         {isLiked ? (
           <FavoriteIcon className="iconRed" />
diff --git a/src/components/ecosystem/Socials.tsx b/src/components/ecosystem/Socials.tsx
index 87087e4..696df81 100644
--- a/src/components/ecosystem/Socials.tsx
+++ b/src/components/ecosystem/Socials.tsx
@@ -23,7 +23,7 @@
 
 import React from 'react'
 import { IconButton, Tooltip } from '@mui/material'
-import { LanguageRounded, WavesRounded, TrackChangesRounded } from '@mui/icons-material'
+import { LanguageRounded, TrackChangesRounded } from '@mui/icons-material'
 import { SocialIcon } from 'react-social-icons/component'
 import 'react-social-icons/discord'
 import 'react-social-icons/github'
@@ -32,6 +32,7 @@ import 'react-social-icons/x'
 import { cmn, cls } from '@skalenetwork/metaport'
 import { type types } from '@/core'
 import FavoriteIconButton from './FavoriteIconButton'
+import SwellIcon from './SwellIcon'
 
 interface SocialButtonsProps {
   social?: types.AppSocials
@@ -78,10 +79,7 @@ const SocialButtons: React.FC<SocialButtonsProps> = ({
     {
       key: 'swell',
       icon: (
-        <WavesRounded
-          className={cls([cmn.pPrim, isMd], [cmn.pSec, !isMd])}
-          fontSize={isMd ? 'medium' : 'small'}
-        />
+        <SwellIcon size={isMd ? 'medium' : 'small'} style={{ padding: '2px', color: '#93B8EC' }} />
       ),
       title: 'Swell'
     }
diff --git a/src/components/ecosystem/SwellIcon.tsx b/src/components/ecosystem/SwellIcon.tsx
new file mode 100644
index 0000000..8ee3001
--- /dev/null
+++ b/src/components/ecosystem/SwellIcon.tsx
@@ -0,0 +1,79 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file SwellIcon.tsx
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+interface CustomLogoIconProps extends SvgIconProps {
+  size?: 'small' | 'medium' | 'large' | number
+}
+
+const CustomLogoIcon: React.FC<CustomLogoIconProps> = ({ size, ...props }) => {
+  let fontSize: string | number = 'medium'
+
+  if (size === 'small') fontSize = '1.25rem'
+  else if (size === 'medium') fontSize = '1.5rem'
+  else if (size === 'large') fontSize = '2.1875rem'
+  else if (typeof size === 'number') fontSize = `${size}px`
+
+  return (
+    <SvgIcon {...props} viewBox="0 0 245.58 276.04" style={{ fontSize, ...props.style }}>
+      <path
+        d="M43.85,31.9c0,0,60.73-40.91,127.82-19.6c14.77,4.69,28.56,12.2,38.02,23.26c6.95,8.12,11.18,17.74,12.82,27.72
+        c1.15,7.02,1.11,14.21-0.08,21.23c-0.63,3.73-1.76,7.58-3.54,11.1c-1.29,2.55-4.33,8.91-8.28,8.65c-1.41-0.09-2.24-0.9-2.94-1.88
+        c-0.75-1.07-1.31-2.53-2.67-0.84c-0.45,0.56-0.7,1.22-1.14,1.78c-1.42,1.81-4.84,2.06-6.6,0.48c-0.64-0.58-1.19-1.39-2.11-1.44
+        c-1.09-0.06-1.76,0.99-2.13,1.88c-1.14,2.73-2.11,5.55-3.83,8.04c-1.72,2.49-4.36,4.68-7.64,5.29s-7.15-0.76-8.28-3.5
+        c-0.75-1.82-0.22-3.84,0.51-5.67c0.69-1.72,1.86-3.7,1.76-5.57c-0.09-1.58-1.51-3.02-3.3-1.8c-0.7,0.48-1.12,1.18-1.52,1.87
+        c-1.66,2.83-3.26,5.67-5.08,8.41c-3.33,5.01-12.37,18.99-21.13,13.22c-2.58-1.7-3.71-4.68-3.51-7.48c0.2-2.8,1.56-5.44,3.21-7.85
+        c1.64-2.42,3.58-4.68,5.11-7.15c0.49-0.8,0.95-1.63,1.05-2.53c0.1-0.9-0.2-1.88-1.01-2.45c-0.8-0.57-1.97-0.63-2.95-0.34
+        c-0.98,0.3-1.78,0.92-2.45,1.6c-1.6,1.64-2.5,3.69-3.44,5.67c-0.93,1.99-1.97,4.01-3.75,5.5c-4.29,3.61-10.48,1.26-11.88-3.43
+        c-1.46-4.87,1.66-10.81,2.32-15.74c0.71-5.33,0.76-10.74,0.17-16.08c-1.18-10.68-4.91-21.09-10.93-29.89
+        C104.81,27.4,83.39,24.29,64.61,26.8C57.41,27.77,50.83,30.11,43.85,31.9z"
+      />
+      <path
+        d="M161.65,137.78c0.54,0.45,1.21,0.75,1.95,0.8c0.93,0.06,1.84-0.3,2.59-0.78c3.08-1.98,4.64-6.27,4.72-9.6
+        c0.03-1.38-0.41-3.29-2.27-3.47c-0.93-0.09-1.83,0.25-2.63,0.67C162.29,127.36,157.37,134.22,161.65,137.78z"
+      />
+      <path
+        d="M193.23,124.68c0.53-0.06,1.13-0.25,1.73-0.62c0.75-0.46,1.39-1.1,1.88-1.74c1.99-2.59,2.25-5.54,1.55-7.23
+        c-0.29-0.7-1.08-1.42-2.6-0.55c-0.76,0.44-1.4,1.08-1.93,1.7C191.36,119.16,189.02,125.14,193.23,124.68z"
+      />
+      <path
+        d="M163.94,150.41c-56.63,19.7-84.65-7.2-84.65-7.2s19.4,9.85,35.67,9.85c-28.09-9.27-48.78-34.72-37.03-67.68
+        c6.1-17.1,20.25-23.01,33.11-26.78c-7.15-18.99-29.41-26.1-48.46-24.18C45.18,36.17,29.21,44.8,18.83,58.7
+        C6.9,74.69,3.97,95.18,7.34,114.38c1.32,7.53,3.24,15.81,6.7,22.71c6.03,12.02,14.87,22.65,26.7,29.56c0,0-5.21-4.75-6.04-9.34
+        c32.11,19.7,69.56,21.05,69.56,21.05c-28.34-8.07-51.06-20.47-57.52-35.15c54.18,49.82,109.47,22.59,119.95,18.54
+        c19.62,11.78,71.57,6.57,71.57,6.57S186.68,165.67,163.94,150.41z"
+      />
+      <path
+        d="M229.95,179.78c-2.5,0.07-5.16,0.12-7.95,0.12c-15.11,0-27.05-1.24-36.51-3.8l-10.59-2.87l0.7,10.48
+        c0.69,10.28-6.17,21.23-17.47,27.91c-19.1,11.28-43.92,11.69-63.92,2.52c-10.1-4.64-18.05-11.54-25.52-19.62
+        c-7.15-7.74-16.36-17.13-27.61-17.6c-7.69-0.33-15.51,2.62-21.02,8c-7.49,7.3-10.3,18.19-8.48,28.34
+        c1.79,9.97,10.7,18.98,18.08,25.56c2.08,1.85,4.24,3.61,6.46,5.27c11.14,8.32,23.71,14.21,36.77,18.72
+        c32.43,11.21,68.61,12.26,101.1,0.63c7.04-2.52,13.88-5.65,20.32-9.45c26.34-15.57,42.67-40.43,43.67-66.51l0.3-7.92L229.95,179.78z"
+      />
+    </SvgIcon>
+  )
+}
+
+export default CustomLogoIcon
diff --git a/src/core/constants.ts b/src/core/constants.ts
index 707df7b..c5ce2fe 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -101,3 +101,5 @@ export const SKALE_SOCIAL_LINKS = {
   swell: 'https://swell.skale.space/',
   website: 'https://skale.space/'
 }
+
+export const DEFAULT_SWELL_URL = 'https://swell.skale.space/'
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 92b2a29..af12684 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -25,7 +25,16 @@ import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { useParams } from 'react-router-dom'
 
-import { MetaportCore, fromWei, styles, cmn, cls, SkPaper } from '@skalenetwork/metaport'
+import {
+  MetaportCore,
+  fromWei,
+  styles,
+  cmn,
+  cls,
+  SkPaper,
+  useWagmiAccount,
+  useConnectModal
+} from '@skalenetwork/metaport'
 import { type types } from '@/core'
 
 import { Button, Grid } from '@mui/material'
@@ -71,9 +80,13 @@ export default function App(props: {
   chainsMeta: types.ChainsMetadataMap
 }) {
   let { chain, app } = useParams()
-  const { likedApps, appLikes, toggleLikedApp, getAppId, getTrendingApps } = useLikedApps()
+  const { likedApps, appLikes, toggleLikedApp, getAppId, getTrendingApps, refreshLikedApps } =
+    useLikedApps()
   const { isSignedIn, handleSignIn } = useAuth()
 
+  const { address } = useWagmiAccount()
+  const { openConnectModal } = useConnectModal()
+
   const newApps = useMemo(
     () => getRecentApps(props.chainsMeta, MAX_APPS_DEFAULT),
     [props.chainsMeta]
@@ -113,11 +126,17 @@ export default function App(props: {
   const trendingAppIds = useMemo(() => getTrendingApps(), [getTrendingApps])
   const isNew = isNewApp({ chain, app }, newApps)
 
-  const handleFavoriteClick = async () => {
+  const handleToggleLike = async () => {
+    if (!address) {
+      openConnectModal?.()
+      return
+    }
     if (!isSignedIn) {
       await handleSignIn()
+      return
     }
     await toggleLikedApp(appId)
+    refreshLikedApps()
   }
 
   const explorerUrl = getExplorerUrl(network, chain)
@@ -206,7 +225,7 @@ export default function App(props: {
                     className={cls(cmn.mbott10, 'btn btnSm')}
                     variant="contained"
                     startIcon={isLiked ? <FavoriteRoundedIcon /> : <FavoriteBorderOutlinedIcon />}
-                    onClick={handleFavoriteClick}
+                    onClick={handleToggleLike}
                   >
                     {isLiked ? 'Favorite' : 'Add to favorites'}
                   </Button>