User settings for address icons type (#1763)

* color theme settings

* address icon settings

* update tests

* add images to the address icon settings

* update styles

* more fixes

docs/ENVS.md

@@ -202,7 +202,7 @@ Settings for meta tags and OG tags
 
 | Variable | Type | Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
+| NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Default style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
 | NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` |
 | NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED | `boolean` | Set to `true` if SolidityScan reports are supported | - | - | `true` |
 

lib/cookies.ts

@@ -10,6 +10,7 @@ export enum NAMES {
   TXS_SORT='txs_sort',
   COLOR_MODE='chakra-ui-color-mode',
   COLOR_MODE_HEX='chakra-ui-color-mode-hex',
+  ADDRESS_IDENTICON_TYPE='address_identicon_type',
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',

nextjs/nextjs-routes.d.ts

@@ -21,12 +21,11 @@ declare module "nextjs-routes" {
     | StaticRoute<"/api/media-type">
     | StaticRoute<"/api/proxy">
     | StaticRoute<"/api-docs">
-    | StaticRoute<"/apps">
     | DynamicRoute<"/apps/[id]", { "id": string }>
+    | StaticRoute<"/apps">
     | StaticRoute<"/auth/auth0">
     | StaticRoute<"/auth/profile">
     | StaticRoute<"/auth/unverified-email">
-    | StaticRoute<"/batches">
     | DynamicRoute<"/batches/[number]", { "number": string }>
     | StaticRoute<"/batches">
     | DynamicRoute<"/blobs/[hash]", { "hash": string }>
@@ -39,8 +38,8 @@ declare module "nextjs-routes" {
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
     | StaticRoute<"/login">
-    | StaticRoute<"/name-domains">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
+    | StaticRoute<"/name-domains">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | StaticRoute<"/ops">
     | StaticRoute<"/output-roots">

public/icons/name.d.ts

@@ -62,6 +62,7 @@
 	| "flame"
 	| "gas_xl"
 	| "gas"
+	| "gear_slim"
 	| "gear"
 	| "globe-b"
 	| "globe"

ui/shared/entities/address/AddressIdenticon.tsx

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
 import React from 'react';
 
 import config from 'configs/app';
+import * as cookies from 'lib/cookies';
 import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface IconProps {
@@ -12,7 +13,8 @@ interface IconProps {
 
 const Icon = dynamic(
   async() => {
-    switch (config.UI.views.address.identiconType) {
+    const type = cookies.get(cookies.NAMES.ADDRESS_IDENTICON_TYPE) || config.UI.views.address.identiconType;
+    switch (type) {
       case 'github': {
         // eslint-disable-next-line react/display-name
         return (props: IconProps) => <IdenticonGithub size={ props.size } seed={ props.hash }/>;

ui/snippets/topBar/TopBar.pw.tsx

@@ -30,6 +30,6 @@ test('default view +@dark-mode +@mobile', async({ mount, page }) => {
   await component.getByText(/\$1\.39/).click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
-  await component.getByLabel('color mode switch').click();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
+  await component.getByLabel('User settings').click();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
 });

ui/snippets/topBar/TopBar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 
-import ColorModeSwitch from './ColorModeSwitch';
+import Settings from './settings/Settings';
 import SwapButton from './SwapButton';
 import TopBarStats from './TopBarStats';
 
@@ -28,7 +28,7 @@ const TopBar = () => {
             <Divider mr={ 3 } ml={{ base: 2, sm: 3 }} height={ 4 } orientation="vertical"/>
           </>
         ) }
-        <ColorModeSwitch/>
+        <Settings/>
       </Flex>
     </Flex>
   );

ui/snippets/topBar/settings/Settings.tsx

@@ -0,0 +1,36 @@
+import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import IconSvg from 'ui/shared/IconSvg';
+
+import SettingsColorTheme from './SettingsColorTheme';
+import SettingsIdentIcon from './SettingsIdentIcon';
+
+const Settings = () => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  return (
+    <Popover placement="bottom-start" trigger="click" isOpen={ isOpen } onClose={ onClose }>
+      <PopoverTrigger>
+        <IconButton
+          variant="simple"
+          colorScheme="blue"
+          aria-label="User settings"
+          icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
+          p="1px"
+          boxSize={ 5 }
+          onClick={ onToggle }
+        />
+      </PopoverTrigger>
+      <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
+        <PopoverBody boxShadow="2xl" p={ 4 }>
+          <SettingsColorTheme/>
+          <Box borderColor="divider" borderWidth="1px" my={ 3 }/>
+          <SettingsIdentIcon/>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(Settings);