user avatar and dependencies update

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [3.2.0](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v3.2.0) (2022-10-04)
+- update dependencies
+- show avatar from maiar mobile app if set
+
 ### [3.1.1](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v3.1.1) (2022-08-13)
 - better errors catching when API is down
 - fixes in displaying the numeric values

components/HeaderMenuButtons.tsx

@@ -4,6 +4,7 @@ import { useCallback, FC } from 'react';
 import { ActionButton } from './ActionButton';
 import { SocialMediaIcons } from './SocialMediaIcons';
 import { LoginModalButton } from './core/LoginModalButton';
+import { UserMenu } from './UserMenu';
 
 interface HeaderMenuButtonsProps {
   enabled: string[];
@@ -45,6 +46,8 @@ export const HeaderMenuButtons: FC<HeaderMenuButtonsProps> = ({ enabled }) => {
 
       <SocialMediaIcons />
 
+      <UserMenu />
+
       {enabled.includes('mint') && (
         <ActionButton onClick={handleMintClick}>Mint</ActionButton>
       )}

components/UserMenu.tsx

@@ -0,0 +1,22 @@
+import { Avatar } from '@chakra-ui/react';
+import { useAccount } from '../hooks/auth/useAccount';
+import { chainType, networkConfig } from '../config/network';
+
+export const UserMenu = () => {
+  const { address } = useAccount();
+
+  if (!address) return null;
+
+  return (
+    <a
+      href={`${networkConfig[chainType].explorerAddress}/address/${address}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Avatar
+        size="md"
+        src={`https://id.maiar.com/users/photos/profile/${address}`}
+      />
+    </a>
+  );
+};

config/chakraTheme.ts

@@ -1,15 +1,6 @@
 // Chakra UI specific theme and variables configuration
 
 import { extendTheme } from '@chakra-ui/react';
-import { createBreakpoints } from '@chakra-ui/theme-tools';
-
-const breakpoints = createBreakpoints({
-  sm: '320px',
-  md: '768px',
-  lg: '960px',
-  xl: '1200px',
-  '2xl': '1560px',
-});
 
 export const theme = extendTheme({
   styles: {
@@ -82,5 +73,11 @@ export const theme = extendTheme({
       },
     },
   },
-  ...breakpoints,
+  breakpoints: {
+    sm: '320px',
+    md: '768px',
+    lg: '960px',
+    xl: '1200px',
+    '2xl': '1560px',
+  },
 });