merge: dev

src/components/BasicSelect.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+interface BasicSelectProps {
+  value: string;
+  setValue: (explorer: string) => void;
+  list: string[];
+  disabled?: boolean;
+  dataTest?: string;
+}
+
+export const BasicSelect = ({ list, value, setValue }: BasicSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const selectItem = (explorer?: string) => {
+    setIsOpen(false);
+    if (!explorer) return;
+    setValue(explorer);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>, explorer?: string) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      selectItem(explorer);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleClick}>{value}</button>
+      {isOpen && (
+        <ul role='listbox'>
+          {list.map((item) => (
+            <li
+              key={item}
+              role='option'
+              tabIndex={0}
+              aria-selected={item === value}
+              onClick={() => selectItem(item)}
+              onKeyDown={(event) => handleKeyDown(event, item)}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

src/components/index.ts

@@ -11,4 +11,5 @@ export * from './FeeParams';
 export * from './RPC';
 export * from './TVL';
 export * from './ChainInformation';
+export * from './BasicSelect';
 export * from './NotFound';

src/containers/Header/index.tsx

@@ -1,23 +1,41 @@
-import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { styled } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 
+import { BasicSelect } from '~/components';
 import { useCustomTheme } from '~/hooks/useContext/useTheme';
 import { zIndex, HEADER_HEIGHT } from '~/utils';
+import { getConfig } from '~/config';
+
+const { DEFAULT_LANG } = getConfig();
 
 export const Header = () => {
   const { changeTheme, theme } = useCustomTheme();
+  const {
+    t,
+    i18n: { changeLanguage, language },
+  } = useTranslation();
+  const { locales, replace } = useRouter();
+
+  const localesMap = locales ? Object.fromEntries(locales.map((locale) => [locale, t(`LOCALES.${locale}`)])) : {};
+
+  const handleChangeLanguage = (value: string) => {
+    const locale = Object.keys(localesMap).find((key) => localesMap[key] === value) || DEFAULT_LANG;
+    replace('/', undefined, { locale: locale });
+    changeLanguage(locale);
+  };
 
   return (
     <StyledHeader>
       <Link href='/' passHref>
-        <Logo>Logo</Logo>
+        <Logo>ZKchainHub</Logo>
       </Link>
       <SIconButton onClick={changeTheme}>{theme === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}</SIconButton>
-      <ConnectButton />
+      <BasicSelect value={t(`LOCALES.${language}`)} setValue={handleChangeLanguage} list={Object.values(localesMap)} />
     </StyledHeader>
   );
 };

src/types/Config.ts

@@ -6,6 +6,7 @@ export interface Env {
 }
 
 export type SupportedLanguage = 'en' | 'es';
+
 export interface Constants {
   SUPPORTED_LANGUAGES: SupportedLanguage[];
   DEFAULT_LANG: SupportedLanguage;