Merge pull request #4179 from ethereum/lang-dropdown-hometab

create lang selector component

libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import DropdownItem from 'react-bootstrap/DropdownItem'
+import { localeLang } from './types/carouselTypes'
+
+
+
+export function LanguageOptions({ plugin }: { plugin: any }) {
+  const [langOptions, setLangOptions] = useState<string>()
+
+  const changeLanguage = async (lang: string) => {
+    await plugin.call('locale', 'switchLocale', lang)
+  }
+
+  useEffect(() => {
+    plugin.call('locale', 'currentLocale').then(opt => {
+      setLangOptions(opt.code.toUpperCase())
+    })
+  }, [langOptions])
+
+  useEffect(() => {
+    plugin.on('locale', 'localeChanged', (lang: localeLang) => {
+      setLangOptions(lang.code.toUpperCase())
+    })
+  }, [langOptions])
+
+  return (
+    <>
+      <div className="d-flex align-items-center justify-content-end mr-2">
+        <DropdownButton title={langOptions} id="langdropdown" size="sm">
+          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
+            <DropdownItem as={'span'} onClick={() =>
+            {
+              changeLanguage(lang.toLowerCase())
+              setLangOptions(lang)
+            }}
+            >
+              {lang}
+            </DropdownItem>
+          ))}
+        </DropdownButton>
+      </div>
+    </>
+  )
+}

libs/remix-ui/home-tab/src/lib/components/types/carouselTypes.ts

@@ -114,3 +114,10 @@ export default class Carousel extends React.Component<CarouselProps> {
   direction: Direction;
   containerRef: React.RefObject<HTMLDivElement>;
 }
+
+export type localeLang = {
+  code: string
+  localeName: string
+  messages: { [key: string]: string }
+  name: string
+}

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -9,6 +9,7 @@ import HomeTabScamAlert from './components/homeTabScamAlert'
 import HomeTabGetStarted from './components/homeTabGetStarted'
 import HomeTabFeatured from './components/homeTabFeatured'
 import HomeTabFeaturedPlugins from './components/homeTabFeaturedPlugins'
+import { LanguageOptions } from './components/homeTablangOptions'
 
 declare global {
   interface Window {
@@ -60,6 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <HomeTabLearn plugin={plugin} />
           </div>
           <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: '65%'}} id="remixUIHTRight">
+            <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>