feat: OneKey footer (#39)

* feat: append OneKey footer as shadow dom

* fix: update layout padding

* feat: update footer source url

* fix: cleanup code

src/components/Footer/Footer.tsx

@@ -0,0 +1,40 @@
+import { FunctionComponent, useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { ILocale } from '../../types';
+
+const LOCALE_MAPPING: {
+  [TKey in ILocale]: string;
+} = {
+  'en-US': '',
+  'zh-CN': '/zh_CN',
+};
+
+const BASE_URL = 'https://onekey.so';
+
+export const Footer: FunctionComponent = () => {
+  const intl = useIntl();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch(
+      `${BASE_URL}${LOCALE_MAPPING[intl.locale as ILocale]}/internal/footer/`
+    )
+      .then((response) => response.text())
+      .then((data) => {
+        const element = containerRef.current;
+
+        if (!element) {
+          return;
+        }
+
+        const shadowRoot =
+          element.shadowRoot ?? element.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = data;
+      })
+      .catch(console.error);
+  }, [intl.locale]);
+
+  return <div ref={containerRef} />;
+};

src/components/Footer/index.ts

@@ -0,0 +1,3 @@
+import { Footer } from './Footer';
+
+export default Footer;

src/components/Layout/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import Header from '../Header';
+import Footer from '../Footer';
 
 export default function Layout({ children }: { children: React.ReactElement }) {
   return (
-    <div className="bg-gray-100">
+    <div className="bg-gray-100 min-h-screen">
       <Header />
-      <main className="min-h-[calc(100vh-theme(space.16))]">
+      <main>
         <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
           <div className="px-4 py-8 sm:px-0">
             <div className="h-auto min-h-96 rounded-sm  bg-white px-[10%]">
@@ -14,6 +15,7 @@ export default function Layout({ children }: { children: React.ReactElement }) {
           </div>
         </div>
       </main>
+      <Footer />
     </div>
   );
 }

src/views/Dashboard.tsx

@@ -104,7 +104,7 @@ export default function Dashboard() {
 
   if (pageStatus === 'initialize') {
     return (
-      <div className="text-gray-800 text-sm text-center py-2">
+      <div className="flex items-center justify-center text-gray-800 text-sm text-center py-2 min-h-[440px]">
         {intl.formatMessage({ id: 'TR_INIT' })}
       </div>
     );