feat: darwinia project page

helix-bridge · Apr 5, 2024 · eaabf54 · eaabf54
1 parent e751900
commit eaabf54
Show file tree

Hide file tree

Showing 15 changed files with 151 additions and 144 deletions.
diff --git a/public/images/my.svg b/public/images/my.svg
diff --git a/public/images/projects/darwinia.png b/public/images/projects/darwinia.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -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",
+  description: "Darwinia xToken cross-chain powered by Helix Bridge.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,6 +2,6 @@ import dynamic from "next/dynamic";
 
 const PageSelect = dynamic(() => import("@/components/page-select"), { ssr: false });
 
-export default function HomePage() {
+export default function Home() {
   return <PageSelect />;
 }
diff --git a/src/app/records/[id]/page.tsx b/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 />
+    </>
   );
 }
diff --git a/src/app/records/page.tsx b/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 />
+    </>
   );
 }
diff --git a/src/components/chain-switch.tsx b/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>
+    </>
+  );
+}
diff --git a/src/components/footer.tsx b/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>
   );

diff --git a/src/components/header.tsx b/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}>

diff --git a/src/components/home-page.tsx b/src/components/home-page.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
 
 export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center">
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden">
       <div className="container flex flex-col items-center justify-center gap-12 px-middle lg:flex-row lg:justify-between lg:gap-middle">
         <div className="flex flex-col">
           <Image alt="Logo" width={210} height={56} src="/images/logo.svg" className="shrink-0" />
@@ -38,6 +38,13 @@ export default function HomePage() {
           </Social>
         </div>
       </div>
+
+      <div
+        className="absolute -bottom-[90vw] left-0 h-[100vw] w-screen rounded-full opacity-40 blur-[6.15rem]"
+        style={{
+          background: "linear-gradient(#1859FF 100%, #0286FF 100%), linear-gradient(271deg, #1859FF 0%, #0286FF 100%)",
+        }}
+      />
     </main>
   );
 }

diff --git a/src/components/page-select.tsx b/src/components/page-select.tsx
@@ -3,8 +3,7 @@
 import HomePage from "./home-page";
 import ProjectPage from "./project-page";
 
-console.log("hostname:", window.location.hostname);
-const isHomePage = window.location.hostname.split(".").length === 2;
+const isHomePage = window.location.hostname.split(".").includes("darwinia");
 
 export default function PageSelect() {
   return isHomePage ? <HomePage /> : <ProjectPage />;

diff --git a/src/components/user.tsx b/src/components/user.tsx
@@ -85,7 +85,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
           .map((balance) => (
             <button
               key={`${balance.chain.network}-${balance.token.symbol}`}
-              className="flex items-center gap-large rounded-middle px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
+              className="flex items-center gap-large rounded-2xl px-3 py-2 transition-colors hover:bg-white/10 disabled:cursor-default lg:py-middle"
               disabled={pathname !== "/"}
               onClick={() => {
                 const _sourceChain = balance.chain;
@@ -144,7 +144,7 @@ export default function User({ placement, prefixLength = 10, suffixLength = 8, o
 }
 
 function LabelSpan({ children }: PropsWithChildren<unknown>) {
-  return <span className="text-base font-medium text-white">{children}</span>;
+  return <span className="text-sm font-bold text-white">{children}</span>;
 }
 
 function ChildSpan({ children }: PropsWithChildren<unknown>) {

diff --git a/src/providers/rainbow-provider.tsx b/src/providers/rainbow-provider.tsx
@@ -36,7 +36,7 @@ export default function RainbowProvider({ children }: PropsWithChildren<unknown>
   return (
     <WagmiConfig config={wagmiConfig}>
       <RainbowKitProvider
-        theme={darkTheme({ borderRadius: "medium", accentColor: "#0085FF" })}
+        theme={darkTheme({ borderRadius: "medium", accentColor: "#FF0083" })}
         chains={chains}
         appInfo={{ appName }}
       >

diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
@@ -64,7 +64,7 @@ export default function Tooltip({
       {isMounted && (
         <FloatingPortal>
           <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()} className="z-30">
-            <FloatingArrow ref={arrowRef} style={styles} context={context} fill="#0085FF" />
+            <FloatingArrow ref={arrowRef} style={styles} context={context} fill="#FF0083" />
             <div
               style={styles}
               className={`flex items-center rounded-middle bg-primary px-middle py-small ${contentClassName}`}