Merge pull request #97 from edenia/feat/improve-ual-login

fix(webapp): remove wallet provider menu dropdown

src/components/AuthUAL/index.tsx

@@ -1,65 +1,23 @@
-/* eslint-disable @next/next/no-img-element */
 import React from 'react'
-import { Box, Menu } from '@mui/material'
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import { Button } from '@edenia/ui-kit'
 
 import useAuthUAL from './useAuthUAL.hook'
 import useStyles from './styles'
 
 const AuthButton: React.FC<{ btnLabel: string }> = ({ btnLabel }) => {
-  const [{ state }, { handleOpenMenu, handleCloseMenu, login }] = useAuthUAL()
+  const [{ state }, { login }] = useAuthUAL()
   const classes = useStyles()
 
   return (
-    <React.Fragment>
-      <Box sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
-        {!state?.ual?.activeUser && (
-          <Button onClick={handleOpenMenu} label={btnLabel} variant='primary' />
-        )}
-      </Box>
-      <Menu
-        className={classes.menuBox}
-        anchorEl={state?.elemRef || null}
-        id='account-menu'
-        open={state?.openMenuWallets}
-        onClose={handleCloseMenu}
-        onClick={handleCloseMenu}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        {(state?.ual?.authenticators || []).map(wallet => {
-          const style = wallet.getStyle()
-          const name = wallet.getName()
-
-          return (
-            <div
-              key={style.text}
-              className={classes.menuItem}
-              style={{
-                backgroundColor: style.background,
-                color: style.textColor
-              }}
-              onClick={() => login(name)}
-              role='button'
-              tabIndex={0}
-              aria-hidden='true'
-            >
-              <div className={classes.iconText}>
-                <img
-                  src={style.icon}
-                  width={28}
-                  height={28}
-                  alt='wallet indicator'
-                />
-                {style.text}
-              </div>
-              <KeyboardArrowRightIcon />
-            </div>
-          )
-        })}
-      </Menu>
-    </React.Fragment>
+    <div className={classes.loginBtn}>
+      {!state?.ual?.activeUser && (
+        <Button
+          onClick={() => login('anchor')}
+          label={btnLabel}
+          variant='primary'
+        />
+      )}
+    </div>
   )
 }
 

src/components/AuthUAL/styles.ts

@@ -1,48 +1,7 @@
 import { makeStyles } from '@mui/styles'
 
-const Styles = makeStyles(theme => ({
-  loginBtn: {
-    fontStyle: 'normal',
-    lineHeight: '16px !important',
-    alignItems: 'center',
-    textAlign: 'center',
-    letterSpacing: '1px !important',
-    textTransform: 'uppercase',
-    color: `${theme.palette.common.white} !important`,
-    borderColor: `${theme.palette.common.white} !important`
-  },
-  menuBox: {
-    '& .MuiPaper-root': {
-      padding: theme.spacing(1)
-    }
-  },
-  menuItem: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: 50,
-    borderRadius: '6px',
-    width: '100%',
-    transition: 'all 0.3s ease 0s',
-    padding: theme.spacing(0, 1),
-    margin: theme.spacing(1, 0),
-    '&:hover': {
-      cursor: 'pointer',
-      transform: 'scale(1)'
-    }
-  },
-  iconText: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    '& img': {
-      marginRight: theme.spacing(1)
-    }
-  },
-  userBtn: {
-    textTransform: 'lowercase',
-    color: `${theme.palette.common.white} !important`
-  }
+const Styles = makeStyles(() => ({
+  loginBtn: { display: 'flex', alignItems: 'center', textAlign: 'center' }
 }))
 
 export default Styles