Home page (#14)

* feat: home page

* feat: darwinia project page

* fix: fix home page select

* refactor: update website title

* refactor: update menu.svg fill color

* refactor: update drawer brand logo

src/app/layout.tsx

@@ -1,8 +1,8 @@
-import Footer from "@/components/footer";
+// import Footer from "@/components/footer";
 import "./globals.css";
 import type { Metadata } from "next";
 import { IBM_Plex_Sans } from "next/font/google";
-import Header from "@/components/header";
+// import Header from "@/components/header";
 import RainbowProvider from "@/providers/rainbow-provider";
 import GraphqlProvider from "@/providers/graphql-provider";
 import AppProvider from "@/providers/app-provider";
@@ -14,8 +14,8 @@ const ibm_plex_sans = IBM_Plex_Sans({
 });
 
 export const metadata: Metadata = {
-  title: "Helix xToken - Helix Bridge",
-  description: "Helix Bridge for xToken cross-chain.",
+  title: "Darwinia xToken - Helix Bridge",
+  description: "Darwinia xToken cross-chain powered by Helix Bridge.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -26,9 +26,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <RainbowProvider>
             <AppProvider>
               <TransferProvider>
-                <Header />
+                {/* <Header /> */}
                 {children}
-                <Footer />
+                {/* <Footer /> */}
               </TransferProvider>
             </AppProvider>
           </RainbowProvider>

src/app/page.tsx

@@ -1,12 +1,7 @@
-import PageWrap from "@/ui/page-wrap";
 import dynamic from "next/dynamic";
 
-const Transfer = dynamic(() => import("@/components/transfer"), { ssr: false });
+const PageSelect = dynamic(() => import("@/components/page-select"), { ssr: false });
 
-export default function HomePage() {
-  return (
-    <PageWrap>
-      <Transfer />
-    </PageWrap>
-  );
+export default function Home() {
+  return <PageSelect />;
 }

src/app/records/[id]/page.tsx

@@ -1,3 +1,5 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
 import RecordDetail from "@/components/record-detail";
 import PageWrap from "@/ui/page-wrap";
 
@@ -9,8 +11,12 @@ interface Props {
 
 export default function RecordPage({ params }: Props) {
   return (
-    <PageWrap>
-      <RecordDetail id={params.id} />
-    </PageWrap>
+    <>
+      <Header />
+      <PageWrap>
+        <RecordDetail id={params.id} />
+      </PageWrap>
+      <Footer />
+    </>
   );
 }

src/app/records/page.tsx

@@ -1,12 +1,18 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
 import PageWrap from "@/ui/page-wrap";
 import dynamic from "next/dynamic";
 
 const HistoryRecords = dynamic(() => import("@/components/history-records"));
 
 export default function RecordsPage() {
   return (
-    <PageWrap>
-      <HistoryRecords />
-    </PageWrap>
+    <>
+      <Header />
+      <PageWrap>
+        <HistoryRecords />
+      </PageWrap>
+      <Footer />
+    </>
   );
 }

src/components/chain-switch.tsx

@@ -0,0 +1,32 @@
+import { getChainConfigs } from "@/utils";
+import { offset, useClick, useDismiss, useFloating, useInteractions, useTransitionStyles } from "@floating-ui/react";
+import { useMemo, useState } from "react";
+import { useNetwork } from "wagmi";
+
+const chainOptions = getChainConfigs();
+
+export default function ChainSwitch() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, context, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset(6)],
+  });
+  const { styles, isMounted } = useTransitionStyles(context, {
+    initial: { transform: "translateY(-10px)", opacity: 0 },
+    open: { transform: "translateY(0)", opacity: 1 },
+    close: { transform: "translateY(-10px)", opacity: 0 },
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+
+  const { chain } = useNetwork();
+  // const activeChain = useMemo(() => chainOptions.find((option) => option.id === chain?.id))
+
+  return (
+    <>
+      <button ref={refs.setReference} {...getReferenceProps()}></button>
+    </>
+  );
+}

src/components/footer.tsx

@@ -1,71 +1,43 @@
-"use client";
-
 import Image from "next/image";
-import { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren } from "react";
 
 export default function Footer() {
-  const [mainnetOrTestnet, setMainnetOrTestnet] = useState<{ label: "Mainnet" | "Testnet"; link: string }>();
-
-  useEffect(() => {
-    if (window.location.hostname === "helixbridge.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://testnet.helixbridge.app" });
-    } else if (window.location.hostname === "testnet.helixbridge.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helixbridge.app" });
-    } else if (window.location.hostname === "helix-stg.vercel.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://helix-stg-test.vercel.app" });
-    } else if (window.location.hostname === "helix-stg-test.vercel.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helix-stg.vercel.app" });
-    } else if (window.location.hostname === "helix-dev-main.vercel.app") {
-      setMainnetOrTestnet({ label: "Testnet", link: "https://helix-dev-test.vercel.app" });
-    } else if (window.location.hostname === "helix-dev-test.vercel.app") {
-      setMainnetOrTestnet({ label: "Mainnet", link: "https://helix-dev-main.vercel.app" });
-    }
-  }, []);
-
   return (
-    <div className="app-footer w-full">
-      <div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-middle">
-        {/* Copyright */}
-        <span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
-
-        <div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
-
-        <div className="flex shrink-0 items-center gap-middle lg:gap-5">
-          <a
-            className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-            href="https://docs.helixbridge.app/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Docs
-          </a>
-
-          {mainnetOrTestnet && (
-            <a
-              className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
-              href={mainnetOrTestnet.link}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              {mainnetOrTestnet.label}
-            </a>
-          )}
-
-          <div className="hidden h-4 w-[1px] bg-white/30 lg:block" />
-
-          <SocialLink href="https://github.com/helix-bridge">
-            <Image width={18} height={18} alt="Github" src="/images/social/github.svg" />
-          </SocialLink>
-          <SocialLink href="https://twitter.com/helixbridges">
-            <Image width={18} height={18} alt="Twitter" src="/images/social/twitter.svg" />
-          </SocialLink>
-          <SocialLink href="https://discord.gg/6XyyNGugdE">
-            <Image width={22} height={22} alt="Discord" src="/images/social/discord.svg" />
-          </SocialLink>
-          <SocialLink href="mailto:[email protected]">
-            <Image width={18} height={18} alt="Email" src="/images/social/email.svg" />
-          </SocialLink>
-        </div>
+    <div className="app-footer flex items-center justify-center px-middle lg:justify-between lg:px-5">
+      <span className="text-xs font-semibold text-white/50">{`© ${new Date().getFullYear()} Powered by Helix Bridge`}</span>
+
+      <div className="hidden items-center gap-5 lg:flex">
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://assethub-bridge.darwinia.network/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Assethub Bridge
+        </a>
+        <a
+          className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
+          href="https://docs.helixbridge.app/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Docs
+        </a>
+
+        <div className="h-3 w-[1px] bg-white/30" />
+
+        <SocialLink href="https://github.com/helix-bridge">
+          <Image width={16} height={16} alt="Github" src="/images/social/github.svg" />
+        </SocialLink>
+        <SocialLink href="https://twitter.com/helixbridges">
+          <Image width={16} height={16} alt="Twitter" src="/images/social/twitter.svg" />
+        </SocialLink>
+        <SocialLink href="https://discord.gg/6XyyNGugdE">
+          <Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
+        </SocialLink>
+        <SocialLink href="mailto:[email protected]">
+          <Image width={16} height={16} alt="Email" src="/images/social/email.svg" />
+        </SocialLink>
       </div>
     </div>
   );

src/components/header.tsx

@@ -32,67 +32,58 @@ export default function Header() {
 
   return (
     <>
-      <div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
-        <div className="mx-auto flex h-full max-w-8xl items-center justify-between px-middle">
-          {/* Left */}
-          <div className="flex items-center gap-5">
-            {/* Logo */}
-            <div className="flex items-center gap-middle">
-              <Link href="/">
-                <Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
-              </Link>
-              <div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
-                <span className="text-xs font-bold text-black">{isProduction() ? "xToken" : "testnet"}</span>
-              </div>
-            </div>
-
-            {/* Navigations */}
-            <div className="hidden items-center gap-middle lg:flex">
-              {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
-                external ? (
-                  <a
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href={href}
-                    key={label}
-                    className={`rounded-middle px-3 py-1 text-sm font-bold text-white transition hover:bg-white/10 active:translate-y-1`}
-                  >
-                    {label}
-                  </a>
-                ) : soon || disabled ? (
-                  <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
-                    <span className="rounded-middle px-3 py-1 text-sm font-bold text-white/50">{label}</span>
-                  </Tooltip>
-                ) : (
-                  <Link
-                    key={label}
-                    href={href}
-                    className={`rounded-middle px-3 py-1 text-sm font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
-                      pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
-                    }`}
-                  >
-                    {label}
-                  </Link>
-                ),
-              )}
-            </div>
-          </div>
+      <div className="app-header fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-b-white/25 bg-app-bg px-middle lg:border-b-transparent lg:px-5">
+        {/* Left */}
+        <div className="flex items-center gap-5">
+          <Link href="/">
+            <Image width={152} height={18} alt="Logo" src="/images/projects/darwinia.png" />
+          </Link>
 
-          {/* Right */}
           <div className="hidden items-center gap-middle lg:flex">
-            <ChainIdentity />
-            <HistoryNav />
-            <User placement="bottom-end" prefixLength={14} suffixLength={10} />
+            {navigationsConfig.map(({ href, label, external, soon, disabled }) =>
+              external ? (
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={href}
+                  key={label}
+                  className={`rounded-middle px-3 py-1 text-sm font-bold text-white transition hover:bg-white/10 active:translate-y-1`}
+                >
+                  {label}
+                </a>
+              ) : soon || disabled ? (
+                <Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
+                  <span className="rounded-middle px-3 py-1 text-sm font-bold text-white/50">{label}</span>
+                </Tooltip>
+              ) : (
+                <Link
+                  key={label}
+                  href={href}
+                  className={`rounded-middle px-3 py-1 text-sm font-bold transition-all hover:bg-white/10 active:translate-y-1 ${
+                    pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
+                  }`}
+                >
+                  {label}
+                </Link>
+              ),
+            )}
           </div>
-          <Image
-            width={24}
-            height={24}
-            alt="Menu"
-            src="/images/menu.svg"
-            className="inline transition-transform active:translate-y-1 lg:hidden"
-            onClick={setIsOpenTrue}
-          />
         </div>
+
+        {/* Right */}
+        <div className="hidden items-center gap-middle lg:flex">
+          <ChainIdentity />
+          <HistoryNav />
+          <User placement="bottom-end" prefixLength={14} suffixLength={10} />
+        </div>
+        <Image
+          width={24}
+          height={24}
+          alt="Menu"
+          src="/images/menu.svg"
+          className="inline transition-transform active:translate-y-1 lg:hidden"
+          onClick={setIsOpenTrue}
+        />
       </div>
 
       <Drawer maskClosable isOpen={isOpen} onClose={setIsOpenFalse}>